通常边输入边替换可使用onkeydown或onkeyup事件，但在中文输入法下不起作用，需要改用oninput事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
input{
width: 500px;
height: 30px;
background: pink;
}
textarea{
width: 500px;
height: 100px;
background: pink;
}
</style>
<script src='jquery-v3.3.1.js'></script>
<title>JS关键词边输入边替换</title>
</head>
<body>
<h1>JS输入敏感词替换功能,中文输入下onkeyup事件不能触发,要用oninput才能正常反应</h1>
<hr>
<h3>JS原生代码实现即时输入替换</h3>
<textarea id='box'></textarea>
<hr>
<h3>jQuery 输入框中输入的关键词替换显示到文本域</h3>
<input type="text" name="in1" id="in1">
<hr>
<textarea id='box1'></textarea>
<hr>
<h3>jQuery 直接替换输入的关键词到文本域</h3>
<textarea id='box2'></textarea>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById('box');
var in1=document.getElementById('in1');
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var re=/打架|斗殴|喝茶|贪污|腐败|专制|黑暗|打黑/g;
// //************JS原生代码
box.oninput=function(){
alert('FFFFFFF')
this.value=this.value.replace(re,'伟大');
}
// //************JQuery代码
$('#box2').bind('input',function(){
var result = $('#box2').val().replace(re,'光明');
$('#box2').val(result);
})
$('#in1').bind('input',function(){
res=$('#in1').val().replace(re,'光明');
$('#box1').val(res);
})
}
</script>
</body>
</html>
网友评论