Geek asks and answers

How to program a disappearing label in an ASP text field?

I am developing a VB.NET program. I currently have an ASP text box with a shortcut displaying inside it. But now the client must manually remove this shortcut before entering its own text. How to get this shortcut to disappear as soon as they start typing?

My script now almost works for txtFind. But in this case, it displays a different text box to display the watermark. How can I reset this watermark to only activate the txtFind text box? And delete the text box on the left side? Here is my new aspx file code:

    <script type="text/javascript" language="javascript" >
        function GetChart(thepart, thepartdesc, thecolor, row)
        {
            Form1.part_transfer.value = thepart;
            Form1.part_desc_transfer.value = thepartdesc;
            Form1.submit();
        }
    </script>

    <head> 
        <title></title>
        <style type="text/css">
            .DataGridFixedHeader {background-color: #336699; color:White; font-weight: "bold"; position:relative; top:expression(this.offsetParent.scrollTop);}
            #txtWatermark{     width:150;     padding:5px;     outline:none;     height:20px; } 
            .focusField{     border:solid 2px #73A6FF;     background:#EFF5FF;     color:#000; } 
            .idleField{     background:#EEE;     color: #6F6F6F;     border: solid 2px #DFDFDF; }
        </style>        
    </head>
    <body>  
        <form runat="Server" defaultbutton= "btnFind" method="post" id="Form1">
            <div style="font-size:18pt; font-family:verdana; font-weight:bold; color:#336699">
               Parts Watch List
            </div>
            <hr style="font-weight: bold; font-size: 20pt; color:#000080;" />
            <div style="height: 380px; text-align: center; position: static;">              
                <input id="part_transfer" type="hidden" runat="server"/>
                <input id="part_desc_transfer" type="hidden" runat="server"/>                               
                <asp:Panel id="Panel1" runat="server" HorizontalAlign = "Center">
                       <span style="font-weight: bold; text-align: left; font-size: 15pt;">
                            Calculation:</span><br />
                        Reliability Rate &nbsp;=&nbsp; 1 - ( number of failed parts in the last 6 months / Part Multiplier * Average instrument Census in the last 6 months),<br />
                        Where
                        <br />
                        Number of failed parts - Summation of failures of a part for a 6 month period<br />
                        Part Multiplier - Number that represents how many times a part is used on the intrument<br />
                        Average instrument census -&nbsp; Average of the instrument census for the same
                        6 month timeframe as failed parts<br />
                        <br />
                        &nbsp; &nbsp; &nbsp; 
                        Please choose one of the parts below to view the control charts.</p>
                </asp:Panel>
                <asp:Panel id="Panel2" runat="server" Visible="false">
                    <chart:WebChartViewer id="WebChartViewer1" runat="server" HorizontalAlign="Center" />
                </asp:Panel>
            </div>
            <hr style="width: 90%; position: static;" />

            <div style="text-align: center; position: static; ">
                <asp:Label id="CensusLastUpdate" runat="server"/><br />
                <asp:Button id="btnExport" runat="server" Text="Export to Excel"></asp:Button>
                <asp:CheckBox id="check1" Text="Display Only Parts Below Threshold" TextAlign="Right" AutoPostBack="True" OnCheckedChanged="ReRun_Main" runat="server" />
                <asp:TextBox ID="txtFind" Text="Enter Part Number" runat="server" />
                <asp:Button ID="btnFind" Text="Search" runat="server" OnClick="SearchTable"  />
            </div> 

            <% Dim scrollPosURL As String = "../includes/ScrollPos.htc"%>
            <input id="saveScrollPos" type="hidden" runat="server" name="saveScrollPos"/>

            <input name="txtWatermark" id="txtWatermark" value="Type something here" type="text"/> 

            <table border="0" cellspacing="0" align="center" style="border-collapse:collapse;position:relative;left:-9">    
                <tr>  
                    <td> 
                        <div style="OVERFLOW: auto; HEIGHT: 400px; vertical-align: top; ">  
                            <ASP:DATAGRID ID="dgTable" HorizontalAlign="Center" runat="server" AutoGenerateColumns="False" ShowHeader="True" OnItemDataBound="DataGrid1_ItemDataBound">
                                <AlternatingItemStyle BackColor = "#eeeeee" />
                                <HEADERSTYLE CssClass="ms-formlabel DataGridFixedHeader" /> 
                                <COLUMNS>

                                    <ASP:BOUNDCOLUMN HEADERTEXT="PN" DATAFIELD="PART_NUM" READONLY="true" ItemStyle-Width="130px" ItemStyle-Font-Size="8"/>
                                    <ASP:BOUNDCOLUMN HEADERTEXT="PART_DESC" DATAFIELD="PART_DESC" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
                                    <ASP:BOUNDCOLUMN HEADERTEXT="numFailed" DATAFIELD="NUM_FAILED" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
                                    <ASP:BOUNDCOLUMN HEADERTEXT="AvgCensus" DATAFIELD="AVG_CENSUS" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
                                    <ASP:BOUNDCOLUMN HEADERTEXT="PartMultiplier" DATAFIELD="PartMultiplier" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
                                    <ASP:BOUNDCOLUMN HEADERTEXT="ReliabilityRate" DATAFIELD="RELIABILITY_RATE" READONLY="true" ItemStyle-Width="105px" ItemStyle-Font-Size="8"/>
                                    <ASP:BOUNDCOLUMN HEADERTEXT="PRIORITY" DATAFIELD="PRIORITY" READONLY="true" Visible="False" ItemStyle-Width="0px" ItemStyle-Font-Size="8"/> 
                                    <ASP:BOUNDCOLUMN HEADERTEXT="Criticality" DATAFIELD="Criticality" READONLY="true" ItemStyle-Width="105px" ItemStyle-Font-Size="8"/>
                                </COLUMNS>              
                            </ASP:DATAGRID>
                        </div>
                    </td>
                </tr>
            </table>
        </form>       
        <!-- Javascript at the bottom for fast page loading --> 
<!-- Grab Google CDN jQuery, with a protocol relative URL; fall back to local if necessary --> 
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js" type="text/javascript"></script> 
<script type="text/javascript">    window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.js">\x3C/script>')</script> 

<!-- Scripts concatenated --> 
<script src="js/plugins.js" type="text/javascript"></script> 
<script src="js/script.js" type="text/javascript"></script> 
<!-- End scripts --> 

    </body>
</html>
+3
source share
3 answers

Check the working jsFiddle daemon :

HTML:

<input name="status" id="status" value="Type something here" type="text"/>

CSS

#status{
    width:150;
    padding:5px;
    outline:none;
    height:20px;
}
.focusField{
    border:solid 2px #73A6FF;
    background:#EFF5FF;
    color:#000;
}
.idleField{
    background:#EEE;
    color: #6F6F6F;
    border: solid 2px #DFDFDF;
}

JQuery

var $input = $("#status"),
    defaultVal = $input[0].defaultValue;

$input.addClass("idleField");

$input.focus(function() {

    $input.toggleClass("idleField focusField");

    if ($input.val() === defaultVal) { $input.val(""); }
    else { $input.select(); }

});

$input.blur(function() {

    $input.toggleClass("focusField idleField");
    if ($.trim($input.val()) === "") { $input.val(defaultVal); }

});


EDIT - jQuery ASPX:

    </form>

    <!-- Javascript at the bottom for fast page loading -->

    <!-- Grab Google CDN jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.js">\x3C/script>')</script>

    <!-- Scripts concatenated -->
    <script src="js/plugins.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <!-- End scripts -->

</body>

script.js jQuery, .

+2

ASP, javascript-, , . , :

http://forums.asp.net/t/1085050.aspx/1

Winforms ( ), (, GotFocus). , , (, " " ), , .

, , , . , , . , , - , .

, , .

+2

Use TextBoxWaterMark extender from AjaxControlToolkit. All this for you!

<asp:textbox runat="server" id="FirstNameTextBox" />
<ajaxtoolkit:TextBoxWaterMarkExtender TargetControlId="FirstNameTextBox"
WatermarkText="Enter Your First Name" />
+1
source

More articles:


All Articles