接下来,进行新的功能代码段的学习。
我们有时候在进行某些输入活动时,用到的都是英文,所以,此时如果能够关闭中文输入法,将减少错误的产生,现在讲的这段javascript代码就是为了完成这个任务而诞生的。
首先,我们创建该案例要用到的HTML代码以及要用到的一些额外的javascript代码段:
<input type = "text" forbidInputWay = '1' id = "forbidInputWay" value = "支持主流浏览器">
本例需要增加的javascript代码段:
forbidInputWay(getElement("forbidInputWaygoogle")); function getElement(Mess){ //根据ID获取指定对象 return document.getElementById(Mess); }
ok,接下来我们开始我们实现该功能的代码段的创建:
<script type = "text/javascript"> var arr = [ //创建节点数组 document.getElementById("forbidInputWaygoogle"), document.getElementById("forbidInputWay")], self = this; for(var i = 0,arrlen = arr.length;i < arrlen;i++){ //遍历待处理的节点对象 var arrl = arr[i]; arr.onfocus = function(){ //获取焦点事件 this.style.imeMode = 'disabled'; //样式方案,只兼容除谷歌之外的浏览器 } var forbidInputWay = arrl.getAttribute("forbidInputWay"); //获取forbidInputWay属性 if(forbidInputWay){ //判断是否存在forbidInputWay var clearChinese = function(_this){ var _v = _this.value; _this.value = _v.replace(/[\u4e00-\u9fa5]/g,""); //正则替换中文字符 } arrl.onkeyup = function(){ //keyup事件 clearChinese(this); } arrl.onblur = function(){ //blur事件 clearChinese(this); } } } </script>
现在,能够实现关闭输入法的整个javascript代码段我们已经创建完毕,接下来,我们一起来进行了解和分析:
第一点,我们将需要操作的对象进行编入数组的工作,方便我们对后面的代码进行统一处理,这就是进行创建节点数组的目的所在,在创建数组的代码中,我们将获取我们需要的元素的ID,将它们编入我们创建的数组中,接下来,我们为了能够增加对外层域的访问,定义了变量self。当我们创建完节点数组以及定义完变量后,我们就可以进行数组节点的遍历,当我们遍历到有符合要求的待操作的元素时,便获取该元素所在的焦点,然后为其设置CSS特殊属性,使得输入法得以关闭。
第二点,我们来讲一下这个CSS特殊属性绑定之后是如何实现关闭输入法功能的,因为有:
this.style.imeMode = "disabled";
因为存在特殊的样式属性imeMode,并设置其为disabled了。imeMode有4种属性参考:1:auto表示打开输入法(默认属性);2:active代表输入法为中文;3:inactive代表输入法为英文;4:disable表示关闭输入法。
第三点,我们继续来分析接下来的代码,在这里,我们需要知道的一处知识点就是,为元素绑定上特殊的元素样式时以用来关闭输入法的方法,可用于除谷歌之外的任意浏览器,但是谷歌浏览器不支持这种方法,所以我们需要利用javascript来控制事件,使得谷歌浏览器也能够实现关闭输入法的功能。
首先,我们创建一个新的变量并且命名为forbidInputWay用来获取节点数组中的forbidInputWay属性,并且在接下来的判断语句中对其进行是否绑定了关闭输入法开关的判断,如果其绑定了该开关,则进入clearChinese()函数块中,触发事件后,通过clearChinese()函数清除中文字符串,接下来,还分别进行blur事件和keyup事件的绑定,意在检测是否还含有中文字符。
这是这个简单小功能的javascript代码的实现,希望对大家有所帮助,也希望大家能够多为我提供更好的代码构建方案。