html中用标签控制输入框输入法,input控件中输入控制的几种方法

有关禁止打开输入法：

ime-mode:disable这个属性在最新的Chrome下是无效的。

另外onchange事件并不能捕捉input控件内容的实时变化，也没办法通过重写onpaste事件禁止粘贴。

最后尝试了oninput事件，onchange事件和onkeyup事件共同控制输入框的值，基本上达到了预想的效果，意外的是oninput事件几乎可以达到屏蔽输入法的效果(可以打开输入法，但无法看到选择汉字的列表)。不过这是Html5才有的

在IE7、8里还是要加上ime-mode:disabled这个样式

下面是针对支持HTML5的浏览器的JS代码(需要引用jQuery)：

/**只能输入数字**/

function addIntCheck(jqueryObj){

jqueryObj.keypress(function(e){

var k = window.event ? e.keyCode : e.which;

if (((k >= 48) && (k <= 57)) || k == 8 || k == 0) {

} else {

if (window.event) {

window.event.returnValue = false;

}

else {

e.preventDefault();

}

}

});

var domObj=jqueryObj.get(0);

domObj.οninput=function(){

domObj.value=domObj.value.replace(/\D/g,'');

};

domObj.οnkeyup=function(){

domObj.value=domObj.value.replace(/\D/g,'');

};

domObj.οnchange=function(){

domObj.value=domObj.value.replace(/\D/g,'');

};

}

/**只能输入数字或小数**/

function addFloatCheck(jqueryObj){

jqueryObj.keypress(function(e){

var k = window.event ? e.keyCode : e.which;

if (((k >= 48) && (k <= 57)) || k == 8 || k == 0 || k == 46) {

var htmlTxt=$(this).val();

if(!isNaN(htmlTxt) && htmlTxt.split(/\./).length==2 && k == 46){

if (window.event) {

window.event.returnValue = false;

}

else {

e.preventDefault();

}

}

} else {

if (window.event) {

window.event.returnValue = false;

}

else {

e.preventDefault();

}

}

});

var domObj=jqueryObj.get(0);

domObj.οninput=function(){

if(!domObj.value)

return;

if((/^\d*(\.){0,1}\d+/g.exec(domObj.value)))

domObj.value=(/^\d*(\.){0,1}\d*/g.exec(domObj.value))[0];

else

domObj.value="";

};

var domObj=jqueryObj.get(0);

domObj.οnchange=function(){

if(!domObj.value)

return;

if((/^\d*(\.){0,1}\d*/g.exec(domObj.value))[0];

else

domObj.value="";

};

domObj.οnkeyup=function(){

if(!domObj.value)

return;

if((/^\d*(\.){0,1}\d*/g.exec(domObj.value))[0];

else

domObj.value="";

};

}

/**只能输入字母或数字**/

function addCodeCheck(jqueryObj){

jqueryObj.keypress(function(e){

var k = window.event ? e.keyCode : e.which;

if ((( k >= 48 ) && ( k <= 57 )) || k == 8 || k == 0 || (( k >= 65 ) && ( k <=90 )) || (( k >= 97 ) && (k <=122 ))) {

} else {

if (window.event) {

window.event.returnValue = false;

}

else {

e.preventDefault(); //for firefox

}

}

});

var domObj=jqueryObj.get(0);

domObj.οninput=function(){

domObj.value=domObj.value.replace(/[^0-9a-zA-Z]+/g,'');

};

domObj.οnkeyup=function(){

domObj.value=domObj.value.replace(/[^0-9a-zA-Z]+/g,'');

};

domObj.οnchange=function(){

domObj.value=domObj.value.replace(/[^0-9a-zA-Z]+/g,'');

};

}

/**不能从键盘输入内容或选择历史输入**/

function forbidInput(jqueryObj){

jqueryObj.keypress(function(e){

if (window.event) {

window.event.returnValue = false;

}

else {

e.preventDefault(); //for firefox

}

});

var domObj=jqueryObj.get(0);

domObj.οnkeyup=function(){

domObj.value='';

};

jqueryObj.attr("autoComplete","off");

jqueryObj.attr("disableautocomplete","");

}

PS:我在Chrome下测试获得的输入事件发生顺序：

从键盘输入一个字符时，假设输入前的值是C，输入后的值是S：

事件    keydown input keypress keyup

值          C              S          S           S

删除一个字符时

事件    keydown  input keyup

值           S              C        C

多个字符一起删除时

事件      keydown      input    keyup

值             S                  S-s          S-s

粘贴时

事件      keydown      input    keyup

值             S                  S+s          S+s

其中需要注意的时，如果在退格删除操作时，对obj的keydown事件中对obj的值(obj.value)进行操作，会有一个奇怪的问题，即无法删除所有的内容。而在其他操作，比如粘贴时，在keydown操作前后，obj.value的值都不会发生改变。

所以，对键盘上的输入进行控制时，不要把逻辑写在keydown方法里