小小的 input 输入框，有大智慧。

产品有一个需求：在一个输入框中，输入手机号，要求只能输入数字，输入非数字的字符就输不进去：

解决：检查输入的值，当有非数字的字符时就用正则表达式替换掉：代码：

$('#phoneNum').on('keyup input',function(){
var value = $(this).val();
$(this).val( value.replace(/[^\d]/g,'') );
});

然后，又有一个需求，当输入够11位之后自动后台查询数据库，如果查询到匹配信息，就让该信息展现在下面。

$('#phoneNum').on("change",checkNum);

function checkNum(){

//查询数据并展现

}

发现，onchange事件有一个弊端，只能在光标离开输入框之后才能触发。然后就想用到onkeyup事件：

$('#phoneNum').on("keyup",checkNum);

function checkNum(){

//查询数据并展现

}

keyup事件很好的解决了onchange事件在失去焦点之后才能触发的弊端，而且，在用户用ctrl+v粘贴的情况下也能触发。然后产品又提出了问题：

如果用户是右键粘贴的怎么办？百度了一下发现有一个对输入框的新事件叫：oninput事件，能够实时检测输入框的变化，并触发事件处理函数。

太棒了，竟然有这么好的方法：

$('#phoneNum').on("input",checkNum);

function checkNum(){

//查询数据并展现

}

oninput事件完美的解决了各种 输入方式，都能对其进行处理。

然而好景并不长，在测试下发现oninput事件在ie9一下的浏览器上并不能生效，这可怎么办。

各种做兼容--在ie9一下用change事件，keyup事件各种兼容写了一通：

if(!window.atob){$('#phoneNum').on("change keyup",checkNum);}

测试了一下好像还可以用，在ie9一下，如果输右键粘贴，就需要让用户在输入框外点击一下 才能执行查询函数。也算是一种折中的办法。

满心欢喜的提交，结果测试的时候又出了问题，原来我们的测试人员习惯用360浏览器，习惯右键粘贴，而且粘贴完之后不在空白处点一下，直接点下面的提交，

于是就出现了，每次点提交都没有反应，再点一次才有反应。原来第一次点击提交才是触发了输入框的change事件，查询数据，第二次点提交才真正的提交。

ie is real a beach 。

真的头都大了，

最后聪明的我想到一个方法，直接在ie9以下的浏览器禁用右键，看你还怎么粘贴。

if(!window.atob){$('#ieforbidden').on('contextmenu',function(){return false;});}

//#ieforbidden是我要禁用右键的那一个div。测试了一下，ie9以下确实不能再右键了，一身轻松。