input hint水印处理

在html中，对于文本框的输入，若有一些规则的设置，采用水印的方式，供用户做参考，也是一种很不错的选择。

水印 hint ，这里需要使用js来做水印的处理，基本处理逻辑为：

1.打开页面后，此时的文本框处于无值、失焦状态，填充默认参考文字；

2.鼠标位于文本框后，得到焦点，清理填充内容；

3.鼠标离开输入框，失焦，若文本框有值，使js onfocus ,onblur失效，若无值，再填充默认值；

具体js如下，可做参考！

<b>Enter Date</b> <input type="text" id="date"><br>
<b>Enter Time</b> <input type="text" id="time">
<script>
function InputHint(el,hint){
    this.hint = hint;
    this.el = el;
    this.el.style.color = '#aaa';
    this.el.value = hint;
    this.el.onfocus = function(){
        el.value = '';
        el.style.color = '';
    }
    this.el.onblur = function(){
        if (el.value == ''){
            el.style.color = '#aaa';
            el.value = hint;
        }else{
            el.onfocus = null;
            el.onblur = null;
        }
    }
}
InputHint(document.getElementByIdx('date'),'e.g. 04-03-08');
InputHint(document.getElementByIdx('time'),'e.g. 16:23');
</script>

最后

以上就是闪闪胡萝卜为你收集整理的input hint水印处理的全部内容，希望文章能够帮你解决input hint水印处理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。