js或者jquery如何禁止输入法，让输入框只能处于英文状态

JavaScript017

js或者jquery如何禁止输入法，让输入框只能处于英文状态,第1张

CSS3有 ime-mode 属性，可以打开或禁止输入法，但只对IE和FF有效。

auto：不影响IME的状态。

normal：正常的IME状态

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

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

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

1、input输入框如果type=password能满足我们的需求，但是是密文，我们要明文显示，实现源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>屏蔽输入法</title>

</head>

<style>

  body{

    background-color:rgb(220, 220, 255)

  }

  #password,#clear{

    position: absolute

  }

  #password{

    opacity: 0

    border: 0px

    width: 1px

    z-index: 999

  }

  #clear{

    outline: none

    color:rgb(214, 124, 6)

    width: 95%

    background-color: rgba(255, 255, 255, 0.2)

    border: none

    height: 40px

    text-indent: 15px

    border-radius: 5px

  }

</style>

<body>

    <input type="password" id="password"/>

    <input type="text" placeholder="请扫描输入内容" id="clear" />

</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<script>

//聚焦clear

$('#clear').focus()

//监听clear输入框

$('#clear').bind('input propertychange', function()

{

  //聚焦password

  $('#password').focus()

  //将clear赋值给password

  $('#password').val($("#clear").val())

  //延迟200毫秒聚焦clear

  setTimeout(function(){

            $("#clear").focus()

        }, 200)

})

//监听password输入框

$('#password').bind('input propertychange', function()

{

  //将password赋值给clear

  $('#clear').val($("#password").val())

  //延迟200毫秒聚焦clear

  setTimeout(function(){

            $("#clear").focus()

        }, 200)

})

</script>

</html>

以下答案为纯原生(vanilla Javascript)方法，实际可以用react、vue之类的库，通过数据绑定的方法实现这种功能。我用的是ECMAScript6的写法，其中let, const关键字老版本IE可能不识别，可以全部换成var。

在var fir = document.getElementById("fir")语句后面加入

function inputHandler (e) {

  e.target.value = e.target.value.replace(/不/g, '')

}

let _debounceTimerId

function debounce (f, ms) {

  const self = this

  return function() {

      const args = arguments

      _debounceTimerId &&clearTimeout(_debounceTimerId)

      _debounceTimerId = setTimeout(function() {

          f.apply(self, args)

      }, ms)

  }

}

fir.addEventListener('input', debounce(inputHandler, 50))

解释：

1、使用HTMLInputElement实例的input事件，该事件在每次键入后都会触发

2、中文输入法在单次键入后，会多次触发input事件，两次触发间隔大概在1-2ms左右

3、为了防止多次触发，需要使用debounce（不知道怎么翻译，暂且用数字电路的“限制抖动”的概念吧），我上面写了一个我自己编的debounce函数，实际可以用现成的库函数，比如Lodash的_.debounce()

4、debounce(inputHandler, 100) 会保证抖动结束100ms后，运行inputHandler中的语句把"不"字去除。