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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值