js 中英文混合输入时处理技巧

作者: Xinxing_Li | 来源:发表于2018-07-01 21:40 被阅读0次

针对中文输入法要灵活使用 DOM3级事件 compositionstart 和compositionend
下面以把输入框内的英文转化为大写为例

<body>
<input id="ii" type="text">
</body>

如果是普通的使用 keyup 事件, 在中英文混合输入的时候会得到奇怪的结果,
可选的做法 : 混合使用这两个 DOM3 级事件以及 keyup 事件

//字母转大写
<script>
var input_state = 1;
    document.getElementById("ii").addEventListener("compositionend", function(e){
        this.value = this.value.toUpperCase();
        input_state =1;
    })
    document.getElementById("ii").addEventListener("compositionstart", function(e){
        input_state =0;
    })
    document.getElementById("ii").addEventListener("keyup", function(e){
        if(input_state==1)this.value = this.value.toUpperCase();
    })
</script>