How do I program a disappearing label into an ASP Textbox?
I am developing a VB.NET program. I currently have an ASP Textbox with a label showing inside it. But now the customer has to manually delete this label before entering their own text. How do I get this label to vanish as soon as they begin typing?
My script is nearly working now for txtFind. But in this case, it shows a different textbox to display watermark image. How can I reset this watermark to only activate the txtFind textbox instead? And to remove the textbox on left-hand 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 = 1 - ( number of failed parts in the last 6 months / Part Multiplier * Average instrument Census in the last 6 months),<br />
Where
<br />
开发者_StackOverflow中文版 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 - Average of the instrument census for the same
6 month timeframe as failed parts<br />
<br />
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>
Check out this 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); }
});
EDIT - Based on comments, to use jQuery in your ASPX file:
</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>
In the script.js is where you would put the jQuery I posted above.
If you are working in ASP, you will need to do some client-side javascript calls to clear out the textbox when it gets the focus. Here is an article on how to do this:
http://forums.asp.net/t/1085050.aspx/1
If you are using Winforms (the question was a bit unclear), you could do this through an event on the textbox (probably the GotFocus event). You would evaluate the box to see if it has the default text (like "enter name here") and if it did you would wipe it out.
Both of these solutions follow the same pattern of tapping into an event to tell you when to clear out the box. Don't forget to make sure it is the text you put in the box. Otherwise if the user comes back to change something in the box, you will wipe out their data.
You could also get trickier and if the user leaves the textbox without entering data, you could put the original default text back in the textbox.
Use the TextBoxWaterMark extender from the AjaxControlToolkit. It's all done for you!
<asp:textbox runat="server" id="FirstNameTextBox" />
<ajaxtoolkit:TextBoxWaterMarkExtender TargetControlId="FirstNameTextBox"
WatermarkText="Enter Your First Name" />
加载中,请稍侯......
精彩评论