在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦
可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能
下面以asp.net代码为例
文本框控件的设置:
属性内设定好onfocus和onblur即可
参数1传递的是控件本身,参数2传的是控件的默认text值
<asp:TextBox ID="Material_No" onfocus="onFocusFun(this,'請輸入料號')" onblur="onblurFun(this,'請輸入料號')" runat="server" AutoPostBack="True">請輸入料號</asp:TextBox>
js代码实现:
若用户没有输入任何东西,取消选择时恢复的默认值字体颜色会变红色(具体颜色可自行调整)
//點擊輸入框時清空默認內容 function onFocusFun(element, elementValue) { if (element.value == elementValue) { element.value = ""; element.style.color = ""; } } //離開輸入框時,若輸入為空 恢復默認內容 function onblurFun(element, elementValue) { if (element.value == '') { element.style.color = "#F40"; element.value = elementValue; } }
效果:
1.默认状态
2.选择状态
3.输入为空,恢复状态