如何將消失標籤編入ASP文本框？

我正在開發一個VB.NET程序。我目前有一個ASP文本框，裏面有一個標籤。但是現在客戶必須在輸入自己的文本之前手動刪除該標籤。如何讓這個標籤在開始輸入後立即消失？如何將消失標籤編入ASP文本框？

我的腳本現在幾乎可以用於txtFind。但在這種情況下，它顯示不同的文本框來顯示水印圖像。我怎樣才能重置這個水印來激活txtFind文本框呢？並刪除左側的文本框？這是我的新ASPX文件代碼：

<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's 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>

來源

2011-05-19 salvationishere

您正在處理哪些類型的項目？ – 2011-05-19 20:45:26

你可以使用一些默認的文字而不是標籤嗎？ – Jack 2011-05-19 22:01:38

我爲這樣的其他人創造了這樣的東西，請查看我的答案。顯然，輸入是ASP.NET無論如何呈現TextBox的東西。而默認值是確定的方式。 – 2011-05-20 01:26:27

看看這個working jsFiddle demo：

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); } 

});

編輯根據意見，在您的ASPX文件使用jQuery：

</form> 

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

    <!-- Grab Google CDN's 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。

來源

2011-05-20 01:19:41

我喜歡你的答案，但我不能決定在哪裏添加jQuery到我的ASPX文件。 – salvationishere 2011-05-20 13:20:12

我會更新我的回答給你看。 – 2011-05-20 13:59:31

答案已更新。 – 2011-05-20 14:06:43

如果您在ASP在工作，你需要做一些客戶端JavaScript調用來清除該文本框，當它獲得焦點。這裏是如何做到這一點的文章：

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

如果您正在使用的WinForms（這個問題有點不清楚），您可以通過在文本框（可能GotFocus事件）的事件做到這一點。你會評估這個盒子，看看它是否有默認的文本（如「在這裏輸入名字」），如果它確實會擦除它。

這兩種解決方案都遵循相同的模式來點擊事件，以告訴您何時清除該框。不要忘記確定它是放在箱子裏的文字。否則，如果用戶回來更改箱子中的某些東西，則會清除他們的數據。

您也可能變得更加棘手，如果用戶不輸入數據而離開文本框，則可以將原始默認文本放回到文本框中。

來源

2011-05-19 21:06:32 IAmTimCorey

謝謝比格斯 - 我已經嘗試了所有這些solutoins和更多，但他們都沒有清除輸入數據後的文本框。 – salvationishere 2011-05-19 21:36:39

使用AjaxControlToolkit中的TextBoxWaterMark extender。這一切都是爲你完成的！

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

來源

2011-05-20 14:09:58 PhilPursglove

如何將消失標籤編入ASP文本框？

回答

相關問題