input hint水印处理

来源:互联网 发布:手机可视化编程 编辑:程序博客网 时间:2024/06/05 17:59

在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>

原创粉丝点击