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

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

php监听input,jQuery如何实时监听获取input输入框的值
jQuery实时监听获取input输入框的值,在我们日常web项目开发也常需要去实现这样的功能效果.为了作出即时动作去引导浏览者,以便提高网站的用户体验感. 下面我们就结合具体的代码示例,为大家介绍j ...
html 输入框联动显示,js下拉选择框与输入框联动实现添加选中值到输入框的方法...
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧 ...
vue watch 经常监听不到_Vue.js中 watch(深度监听)的最易懂的解释
FullName: {{fullName}} FirstName: newVue({ el:'#root', data: { firstName:'Dawei', lastName:'Lou', fu ...
javascript 校验非空_前端(js+JQuery非空校验)
1.倒退://history.go(-1);//javascript: history.back(); 两种页面跳转的方法: //Response.Write(""); Page. ...
html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法
@(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求使用扫码枪扫描条 ...
js / jquery 使用val()赋值监控事件失效
场景: 当内容发生改变时对隐藏的input框进行监控(这里不直接赋值,通过select或其他条件的改变使用jquery赋值) 需要监控的对象 <input type="hidden&q ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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