html通过JS/jQuery实现 实时监听输入框input的内
2019-08-13 本文已影响11人
CoderZb
最近在做一个功能：联想搜索功能。具体实现做法如下：通过实时监听输入框input的内容，来实时发起网络请求，向后台获取联想到的搜索内容并展示到前台。那么该如何实现input的实时监听呢
做法一(jQuery)：on()方法里面的input事件。兼容性好。
<html>
<head>
<style>
....
....
</style>
</head>
<body>
....
....
<div class="talkBottom">
<input class="talkInput" type="text" value="" placeholder="新消息">
<span class="iconfont icon-xiaoxitianjia" onclick="divClick('加号')"></span>
<span class="sendBtn" onclick="onSend()">发送</span>
</div>
....
....
</body>
<script type="text/javascript">
$('.talkInput').on('input',function(){
var inputContent = $('.talkInput').val();
console.log("实时获取输入的内容-----" + inputContent);
if ($.trim(inputContent) == '') {
// 输入框没有值，隐藏之前显示的联想内容div
$(".dependentBox").css("display", "none");
}else{
// 输入框有值，就发起网络请求获取搜索内容
xunsearchFunc(inputContent);
};
});
</script>
</html>
做法二(jQuery)：bind()方法里面的input propertychange事件
<html>
<head>
<style>
....
....
</style>
</head>
<body>
....
....
<div class="talkBottom">
<input class="talkInput" type="text" value="" placeholder="新消息">
<span class="iconfont icon-xiaoxitianjia" onclick="divClick('加号')"></span>
<span class="sendBtn" onclick="onSend()">发送</span>
</div>
....
....
</body>
<script type="text/javascript">
$(".talkInput").bind("input propertychange",function(event){
var inputContent = $(".talkInput").val();
console.log("内容-----" + inputContent);
if ($.trim(inputContent) == '') {
$(".dependentBox").css("display", "none");
}else{
xunsearchFunc(inputContent);
};
});
</script>
</html>
做法三(JS)：在html的input标签上添加一个oninput.对 谷歌、Safari、IE的部分版本、火狐有效，所以是有局限性的。
<html>
<head>
<style>
....
....
</style>
</head>
<body>
....
....
<div class="talkBottom">
<input class="talkInput" type="text" oninput="onInputFunc(event)" value="" placeholder="新消息">
<span class="iconfont icon-xiaoxitianjia" onclick="divClick('加号')"></span>
<span class="sendBtn" onclick="onSend()">发送</span>
</div>
....
....
</body>
<script type="text/javascript">
function onInputFunc(event){
var inputContent = event.target.value;
console.log("内容-----" + inputContent);
if ($.trim(inputContent) == '') {
$(".dependentBox").css("display", "none");
}else{
xunsearchFunc(inputContent);
};
}
</script>
</html>
动态图
101.175525.gif
静态图
联想搜索input.png
