input控件中输入控制的几种方法
2015-08-28 10:56
381 查看
有关禁止打开输入法:
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(!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.onchange=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="";
};
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","");
}
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方法里
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(!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.onchange=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="";
};
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","");
}
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方法里
相关文章推荐
- SAP系统与MES系统的数据协同技术方案
- jQuery基于ajax实现星星评论代码
- 第10章 同步设备I/O和异步设备I/O(3)_接收I/O请求完成通知的4种方法
- 西电人总结各it公司待遇
- WPF调用Matlab函数方法
- XYZZY
- android AsyncTask和Handler对比
- AngularJS+Node.js实现在线聊天室
- CentOS7架设并配置openssh服务器
- xib的几个用法 来自别人的博客。。
- CentOS7给普通用户执行root相关权限
- UVA572dfs连通块
- 反射(DAO层的设计)<学习随笔>
- 协议(protocol)委托代理
- 转 Java内存管理原理及内存区域详解
- MySQL启用SSD存储
- LeetCode题解:3Sum
- [CareerCup] 7.2 Ants on Polygon 多边形上的蚂蚁
- SQL 查看 死锁
- GO语言介绍