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');
}
});