input框的内容变化监听

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('请输入关键字搜索')"  oninput="setCustomValidity('')>

这里的oninput="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');
       }
});


posted @ 2018-03-17 22:36  执码挥战  阅读(404)  评论(0编辑  收藏  举报