js 实时监听input中值变化

最新推荐文章于 2023-12-29 23:26:56 发布
最新推荐文章于 2023-12-29 23:26:56 发布
阅读量255 收藏
点赞数
分类专栏： jquery 前端 文章标签： js jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/var_dz/article/details/80237475
版权
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title>js 实时监听input中值变化</title>  
  6.     <script type="text/javascript" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <h1 >  
  10.             实时监测input中值的变化  
  11.         </h1>  
  12.         <input type="text" id="demo" autoComplete='off'>  
  13.         <div id="res"></div>  
  14.     </body>  
  15. </html>  


[javascript]  view plain  copy
  1. $(function(){  
  2.   
  3. $('#demo').bind('input propertychange', function() {  
  4.     $('#res').html($(this).val().length + ' characters');  
  5. });  
  6.   
  7. })  

类似于，实现微博的‘还能输入xxx个字符’

oninput,onpropertychange,onchange的用法
onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
東子_dz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js监听input输入框值的即时变化
一个迷茫的小码农
02-28 2万+
20150228今天研究一下了用js监测input框的即时变化，参考网络上的多篇文章，总结了一下，大概有以下几种方法 以下都是兼容IE,firefox,chrome常用流行浏览器 1、在元素上同时绑定 oninput 和onporpertychanger事件 例： function aa(e){alert("inputting!!");} 2、使用原生js添加监听事件
js-监听input值变化
water880521的博客
08-20 420
监听input值变化： $('#username').bind('input propertychange', function() {alert("input值发生变化");});
通过JS监听input输入框的值变化
二木成林
10-18 6968
效果展示 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="text" id="input" oninput="getValue();" onporpertychange="get...
js监听input值变化_JS编程实用技巧：监听变量数据变化。
weixin_39610366的博客
12-03 531
在JS编程中，如果能监测变量的内容，当变量值发生变化时，实时发出通知，这定是一项很有用的功能。下面就来实现它。监听效果先来看效果，当变量值发生变化时，自动提示出旧值和新值：实现方式用一个例程实现上述效果。一个js、一个html。js内容：/*** @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch* @study https://www.jshaman.com/*...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
当使用`v-for`与`input`或`select`元素结合时，我们常常需要监听这些表单元素的值变化，以便在值发生变化时执行相应的操作。本文将详细介绍如何在Vue中处理这种情况，并提供相关知识点。 1. **`v-on:input` 事件...
jQuery操作checkbox并获取选中值
12-03
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能...
JS获取选中的radio button的值
03-21
此外，还可以通过事件监听（如`change`事件）来实时获取用户的选择，以便实现动态交互。 总结来说，获取选中的Radio按钮的值主要涉及HTML的Radio元素、JavaScript的DOM操作和事件处理。理解并掌握这些知识点对于...
jQuery操作CheckBox的方法介绍(选中,取消,取值)
12-10
5. **获取选中值**：最后，`$("#btn5").click`事件用于获取所有选中CheckBox的值。使用`$("[name='checkbox'][checked]")`选择所有已选中的CheckBox，然后遍历它们，将每个选中项的`value`属性值添加到字符串`str`中...
ui-choose.js表单单选框复选框美化jQuery特效.zip
07-11
- **jQuery操作**：`ui-choose.js`利用jQuery库的强大功能，通过选择器找到相关的表单元素，然后应用CSS类和JavaScript事件处理来改变其外观和行为。 - **CSS样式覆盖**：通过添加自定义CSS样式，覆盖了浏览器默认...
JavaScript 实时监听input 中值变化
belusoi的博客
03-14 1万+
JavaScript 实时监听input 中值变化 在 <input> 标签中，添加属性 oninput ，oninput 事件在元素获得用户输入时发生。 当 <input> 或 <textarea> 元素的值发生改变时，会发生此事件。可以监控的HTML 标签：<input type="color">, <input type="date">, <input type="datetime">, <input type="email
js实现实时监听input输入框值的变化
wunianisme的博客
08-22 4643
要想实现实时监听input输入框值的变化的效果，只需要让input元素监听两个事件：input和propertychange，然后调用对应的js监听函数即可。 先使用原生js代码实现。 <input type="text" oninput="onInputChange(event)" onpropertychange="onInputChange2(event)" /> <sc...
Js（Jquery）实时监听input输入框值的变化
热门推荐
一颗程序猿
10-03 1万+
效果图 Js写法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;i
js实时监听input输入框值的变化
最新发布
weixin_45342302的博客
12-29 2226
刚开始在这里踩了个坑，我以为event.target.value的值是null，所以条件写成了if(event.target.value == null)，数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。做了一个简单的html网页，用到了ajax技术。方案二：在点击加载按钮的时候，先将元素内容清空再进行ajax请求，直接在点击事件触发的方法里清空数据即可。过程中遇到的问题：当我清空keyword值后，上一次搜索的cas和mw依然存在。
JS 判断input标签值变化
weixin_45830165的博客
04-16 7871
JS 判断input标签值变化（三种方式） 1、onchange 监听 input 值变化 （1）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效） （2）当前对象失去焦点(onblur)； inputs.onchange = function(){ console.log(inputs.value); } 运行结果：只有对象失去焦点时，才会打印 input 的值 2、onpropertychange 监听 input 值变化 只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
JavaScript教程：如何使用input事件监听用户输入
我点评的博客
07-20 5703
在使用input事件时，我们需要注意事件的触发时机，并根据不同情况作出相应的处理。在上面的代码中，我们首先获取了一个id为\searchBox\的搜索框元素，然后使用addEventListener方法绑定了一个input事件的监听函数。当用户输入关键词时，该函数就会被触发。具体来说，我们可以监听搜索框的input事件，当用户输入关键词时，向服务器发送一个Ajax请求，获取相关的搜索结果，并将结果展示在页面上。因此，在使用input事件时，我们需要注意事件的触发时机，并根据不同情况作出相应的处理。
input值变化监听事件
geek-wk
08-14 1万+
一.input monitor function 1. onchange() onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <select>,<keygen>. 注意：在元素的值改变了且失去焦点时触发(两次的值一样不会触发). 缺陷：通过js代码改变DOM...
jq监听input值的变化_51. Vue名称案例使用watch监听数据变化
weixin_39571403的博客
11-25 324
需求上一章节，我才用了监听keyup事件的方式，实现了一个名称拼接的案例。那么其中Vue框架提供一个watch组件，可以用来监听数据的变化，然后再执行相关的业务方法。那么，本篇章则可以使用watch来实现。下面先来看看官网的基本功能说明。侦听器watch官网说明虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的...
JS 实时监听input的value值改变 解决方案
無痕剑的博客
03-23 1万+
该方案在FoxFire、Chrome、360急速、Microsoft Edge、IE11下测试均可以正常显示。html页面代码：html> charset="UTF-8"> 测试页面 type="text/css" rel="stylesheet" href="../css/myhtml5.css"/>测试输入框事件监听 点击输入框，输入字符：
监听sessionStorage中值的变化
05-12
要监听sessionStorage中值的变化，可以使用`window.addEventListener`方法，监听`storage`事件。当sessionStorage中的值发生变化时，该事件会被触发。在事件处理程序中，可以使用`event.key`属性获取发生变化的键值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值