input控件中输入控制的几种方法

最新推荐文章于 2025-06-09 20:31:44 发布

原创最新推荐文章于 2025-06-09 20:31:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript

本文介绍了如何在HTML5中使用JS和CSS控制input输入框的输入，包括禁止打开输入法、只能输入数字、小数以及字母数字的限制，并提供了相应的代码示例。在Chrome下，oninput事件能有效屏蔽输入法，而在IE7、8则需使用ime-mode:disabled样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有关禁止打开输入法：

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.oninput=function(){
domObj.value=domObj.value.replace(/\D/g,'');
};
domObj.onkeyup=function(){
domObj.value=domObj.value.replace(/\D/g,'');
};
domObj.onchange=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.oninput=function(){
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.onchange=function(){
if((/^\d+(\.){0,1}\d+/g.exec(domObj.value)))
domObj.value=(/^\d*(\.){0,1}\d*/g.exec(domObj.value))[0];
else
domObj.value="";
};
domObj.onkeyup=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="";
};
}
/**只能输入字母或数字**/
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.oninput=function(){
domObj.value=domObj.value.replace(/[^0-9a-zA-Z]+/g,'');
};
domObj.onkeyup=function(){
domObj.value=domObj.value.replace(/[^0-9a-zA-Z]+/g,'');
};
domObj.onchange=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.onkeyup=function(){
domObj.value='';
};
jqueryObj.attr("autoComplete","off");
jqueryObj.attr("disableautocomplete","");
}