javascript监听输入框_html通过JS/jQuery实现 实时监听输入框input的内容

最近在做一个功能：联想搜索功能。具体实现做法如下：通过实时监听输入框input的内容，来实时发起网络请求，向后台获取联想到的搜索内容并展示到前台。那么该如何实现input的实时监听呢

做法一(jQuery)：on()方法里面的input事件。兼容性好。

....

....

....

....

发送

....

....

$('.talkInput').on('input',function(){

var inputContent = $('.talkInput').val();

console.log("实时获取输入的内容-----" + inputContent);

if ($.trim(inputContent) == '') {

// 输入框没有值，隐藏之前显示的联想内容div

$(".dependentBox").css("display", "none");

}else{

// 输入框有值，就发起网络请求获取搜索内容

xunsearchFunc(inputContent);

};

});

做法二(jQuery)：bind()方法里面的input propertychange事件

....

....

....

....

发送

....

....

$(".talkInput").bind("input propertychange",function(event){

var inputContent = $(".talkInput").val();

console.log("内容-----" + inputContent);

if ($.trim(inputContent) == '') {

$(".dependentBox").css("display", "none");

}else{

xunsearchFunc(inputContent);

};

});

做法三(JS)：在html的input标签上添加一个oninput.对 谷歌、Safari、IE的部分版本、火狐有效，所以是有局限性的。

....

....

....

....

发送

....

....

function onInputFunc(event){

var inputContent = event.target.value;

console.log("内容-----" + inputContent);

if ($.trim(inputContent) == '') {

$(".dependentBox").css("display", "none");

}else{

xunsearchFunc(inputContent);

};

}

动态图

101.175525.gif

静态图

联想搜索input.png