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中的语句把"不"字去除。