关闭表单元素的输入法是非常常见的,如E-mail,网址用的都是英文,那么关闭输入法,就可以防止用户错误的输入。
目前主流的方法有两种:CSS与JavaScript
方案一:植入CSS特殊的属性,那么这个属性有一个弊端,就是不支持chrom;
function banInputMethod(ele) {
var arr = _ele,
self = this;
if(!(_ele instanceof Array)) {
arr = [_ele];
};
for (var i=0,arrLen=arr.lenth; i<arrLen; i++) {
var arrL = arr[i];
arrL.onfocus = function() {
this.style.imeMode="disabled";
};
}
}
banInputMethod(getElement("inputId"));
function getElement(eStr) {
return document.getElementById(eStr);
}
<h2>关闭输入法</h2>
<input type="text" id="inputId" value="不支持chrom浏览器" />
方案二:事件文本过滤
为了修复chrom浏览器的不兼容,可以使用js中的时间方法来禁止输入中文,模拟关闭输入法。
var arr = [document.getElementById("id1"),document.getElementById("id2")],
self = this;
for (var i=0,arrLen=arr.length; i<arrLen; i++) {
var arrL = arr[i];
arrL.onfocus = function() {
this.style.imeMode = "disabled";
};
}
var banInputMethod = arrL.getAttribute("banInputMethod");
if (banInputMethod) {
var clearChinese = function(_this) {
var _v = _this.value;
_this.value = v.replace(/[u4e00-u9fa5]/g, "");
};
arrL.onkeyup = function() {
clearChinese(this);
};
arrL.onblur = function() {
clearChinese(this);
};
}
//html
<input type="text" banInputMethod="1" id="id1" value="支持主流浏览器!" >