ime-mode 不支持Chrome | 输入框限制输入语言

一、Chrome 实现input切换输入法（inactive）

type=“tel”

<input type="tel" id="testInactive" style="ime-mode:inactive"/>

**说明：不支持搜狗等外部输入法，支持自带的输入法

图片来源链接

二、Chrome 实现input禁用输入法（disabled）

tel + ime-mode:disabled实现不了禁用输入法
想要的效果如下（日文输入法下）：

替代实现方法：
1、定义一个input（在ie下ime-mode: disabled是可用的）

<input type="text" id="testDisabled" size="3" style="ime-mode: disabled;"/>

2、用focus()+readonly+keydown()实现
考虑到shift，tab，backspace等按键，按键keyCode参考文章
https://www.cnblogs.com/daysme/p/6272570.html?utm_source=itdadao&utm_medium=referral

$("#testDisabled").focus(function () {
	$("#testDisabled").prop("readonly", "readonly");
	$("#testDisabled").keydown(function (e) {
		var temp = $("#testDisabled").val();
		var start = e.target.selectionStart;
		if((e.keyCode <= 90 && e.keyCode >= 65) 
				|| (e.keyCode <= 57 && e.keyCode >= 48) 
				|| (e.keyCode <= 105 && e.keyCode >= 96)){
			$("#testDisabled").val(temp + e.key);
		} else if(e.keyCode == 8){ //backspace
			$("#testDisabled").val(temp.substr(0, temp.length-1));
		} else if(e.keyCode == 16) { // shift

		} else if(e.keyCode == 108 || e.keyCode == 27 || e.keyCode == 9) { // enter  esc  tab
			$("#testDisabled").blur();
		} else if(e.keyCode == 37){ // left
			var inpObj = document.getElementById("testDisabled");
			if (inpObj.setSelectionRange) {
				setTimeout(function () {
					inpObj.setSelectionRange(start - 1, start - 1);
				}, 0);
			}
		} else if(e.keyCode == 39){ // right
			var inpObj = document.getElementById("testDisabled");
			if (inpObj.setSelectionRange) {
				setTimeout(function () {
					inpObj.setSelectionRange(start + 1, start + 1);
				}, 0);
			}
		}
	})
});

三、CSS 之 ime-mode

参考：https://blog.csdn.net/tyjlearning/article/details/72625377

<input id="test1" name="test1" style="ime-mode:disabled"/>
<input id="test2" name="test2" style="ime-mode:active"/>
<input id="test3" name="test3" style="ime-mode:inactive"/>
<input id="test4" name="test4" style="ime-mode:auto"/>

第一个是不显示输入法，即用键盘也不能切换输入法。
第二个是自动切换成中文输入法，但还可以用键盘切换。
第三个是自动切换成英文的输入法，但还可以用键盘切换。
第四个是根据当前的输入法来确定的，如果当前是英文的，那就显示英文，是中文的那就显示中文。

语法：

ime-mode : auto | active | inactive | disabled

取值：

auto : 默认值。不影响ime的状态。与不指定 ime-mode 属性时相同。

active : 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime。

inactive : 指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime。

disabled : 完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime。

说明：

设置或检索是否允许用户激活输入中文，韩文，日文等的输入法(ime)状态。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 imemode 。

四、禁止输入中文

<!--禁止输入中文-->
<!--\u4e00-\u9fa5为中文的编码范围-->
<input type="text" id="test" style="ime-mode: disabled" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"/>