input框的内容变化监听

7 篇文章 0 订阅

input的两个功能

1.不允许一开始输入空格(即在input框内容为空的时候,输入空格是没有作用的)

2.input框的内容变化监听

这属于比较完美的input的设计了

下面是html代码实现功能1

<input name="assword" type="text" class="search_input" size="28" placeholder="请输入关键字"  value="" onKeypress="javascript:if(event.keyCode == 32 && this.value =='')event.returnValue = false;" required oninvalid="setCustomValidity('请输入关键字搜索')"  οninput="setCustomValidity('')>

这里的οninput="setCustomValidity('')很多网站的所谓改变required的提示信息都会漏掉这个,会造成一个相当隐形的bug,就是在第一次提示之后,input输入内容会不断的提示required信息以及有内容的情况下提交表单也会这样提示。

下面是JS的代码,这里引用了JQ

/*input键盘事件显示打叉*/
$('.search_input').bind("input propertychange", function(){  
       if($('.search_input').val()==''){
        $('.icon-search_input').css('display','none');
       }else{
        $('.icon-search_input').css('display','block');
       }
});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值