Home > 语言编程 > [CSS]浏览器IME输入法控制禁止输入中文

[CSS]浏览器IME输入法控制禁止输入中文

通常的HTML开发过程中text类型input控件禁止输入中文控制一般通过js来实现,通过判定用户录入的文本的字符编码的范围来选择是否被输入到控件来实现。
在CSS3.0下可以直接使用样式来控制输入控件的输入法设置,通过设置对象样式的ime-mode即可,可选设定值为:
auto:不影响IME的状态。
active:指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
inactive:指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
disabled:完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime
normal:正常的IME状态。(IE不支持,不推荐选用)

示例代码:

1
<input type="text" style="ime-mode:disabled" />

1
2
3
4
5
6
7
8
9
10
/*Chrome Safari*/
-webkit-ime-mode: auto | active | inactive | disabled
/*Mozilla Firefox*/
-moz-ime-mode: auto | active | inactive | disabled
/*Opera*/
-o-ime-mode: auto | active | inactive | disabled
/*Internet Explorer*/
-ms-ime-mode: auto | active | inactive | disabled
/*CSS3 Standard*/
ime-mode: auto | active | inactive | disabled

不过貌似以上方法在Chrome 30.0.1599.69 m下已经失效了,所以目前只能结合js来手动进行控制,建议开发时考虑以下方法

1
2
3
//\u4e00-\u9fa5为中文的编码范围
<input type="text" style="ime-mode:disabled" 
onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"/>

如果是手机HTML5 APP开发可以使用下面的方法

1
<input type="tel">

参考网址:
http://stackoverflow.com/questions/15520410/disable-ime-mode-google-chrome

Categories: 语言编程 Tags: , ,
  1. December 31st, 2014 at 15:03 | #1

    在(PC上)Chrome 下面,用 ,还是可以输入中文的~ 55555…

  1. No trackbacks yet.