[JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值

在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦

可以在文本框属性定义触发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.输入为空,恢复状态