JS 实时监听input的value值改变 解决方案

最新推荐文章于 2023-12-29 23:26:56 发布
最新推荐文章于 2023-12-29 23:26:56 发布
阅读量1.4w 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20112609/article/details/65440593
版权
该方案在 FoxFire、Chrome、360急速、Microsoft Edge、IE11下测试均可以正常显示。
html页面代码： 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <link type="text/css" rel="stylesheet" href="../css/myhtml5.css"/>
</head>
<body>
<div><h1>测试输入框事件监听</h1></div>
<div>
    <table>
        <tr><th><span>点击输入框，输入字符：</span></th></tr>
        <tr><td><input id="input_text" type="text" placeholder="点击输入" value=""/></td></tr>
        <tr><td><input id="input_button" type="button" value="点击结束" name="完成"/></td></tr>
    </table>
</div>
<script src="../scripts/jq.js"></script>
<script src="../scripts/myhtml5.js"></script>
</body>

js代码： 
$(document).ready(function () {

    $("#input_text").bind("input propertychange",function () {
        $("#input_button").val("已经输入了"+$("#input_text").val().length+"个字。。。");
    });

    $("#input_button").click(function () {
        alert($("#input_text").val()+"\n"+$(this).val());
    });
});
無痕剑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery实时监听input value的实例
12-29
实例如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> </head> <body id=lia-body> <div class=lia-content> <div class=inputwrapper> <label><span>姓名：</span><input type=text name=fullname></label> <div class=result></div> </di
js监听input输入框值的实时变化实例
01-21
1、在元素上同时绑定 oninput 和onporpertychanger事件 例： [removed] function aa(e){alert(inputting!!);} [removed] <input type=text id=a oninput=aa(event) onporpertychange=aa(event) /> 2、使用原生js添加监听事件 [removed] $(function(){ if(\v==v){//true为IE浏览器，感兴趣的同学可
angular 实时监听input框value值的变化触发函数方法
10-18
今天小编就为大家分享一篇angular 实时监听input框value值的变化触发函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue监听input标签的value值方法
10-18
今天小编就为大家分享一篇vue监听input标签的value值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js如何监听一个变量数值的变化
dgnankai的专栏
01-27 1万+
最简单的方法是，在给a赋值的时候绑定一个事件。 var a =0; /*很简单的一个方法，就实现了，你给a赋值的时候，绑定了一个事件，这个事件参数，event你可以自己传入一个函数。这样你以调用给a赋值的方法，set_a_value 就会执行这个绑定的事件*/ var set_a_value = function(_a,event){ a=_a; if(event){ event(); } }; /**调用例子*/ var test = function(){
通过JS监听input输入框的值变化
二木成林
10-18 6764
效果展示 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="text" id="input" oninput="getValue();" onporpertychange="get...
JS 判断input标签值变化
weixin_45830165的博客
04-16 7253
JS 判断input标签值变化（三种方式） 1、onchange 监听 input 值变化 （1）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效） （2）当前对象失去焦点(onblur)； inputs.onchange = function(){ console.log(inputs.value); } 运行结果：只有对象失去焦点时，才会打印 input 的值 2、onpropertychange 监听 input 值变化 只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
原生js实现 监控变量值变化了，自动修改页面内容
小沐
08-07 428
【代码】原生js实现 监控变量值变化了，自动修改页面内容。
实时监听js改变value，跨浏览器支持
Go语言中文网
12-31 219
今天同事测试发现项目中一个小bug，然后我负责解决。研究了不短的时间，终于搞定了，有点激动。呵呵。拿出来与大家分享。 想要实现的功能大概是这样的： 有两个文本框，其中一个只读，另一个可以输入。要求在可输入文本框中输入文本时，只读文本框能够获得输入的值，且只读文本框旁边出现提示信息，实时显示只读文本框的内容。 这个功能看是简单，但其实并没有想象的那么简单。（注意，可输入框的处理没什么可...
js实时监听input输入框值的变化
最新发布
weixin_45342302的博客
12-29 1197
刚开始在这里踩了个坑，我以为event.target.value的值是null，所以条件写成了if(event.target.value == null)，数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。做了一个简单的html网页，用到了ajax技术。方案二：在点击加载按钮的时候，先将元素内容清空再进行ajax请求，直接在点击事件触发的方法里清空数据即可。过程中遇到的问题：当我清空keyword值后，上一次搜索的cas和mw依然存在。
js监听变量值或对象属性值变化的方法
qq_38892809的博客
01-05 9107
@js监听变量值或对象属性值变化的方法 js监听变量值或对象属性值变化的方法 监听值的改变 此方法用于监听对象属性值的改变, 要监听js中的变量可以加在一个对象中监听即可 监听的对象是Data , 监听的变量是data Object.defineProperty(Data,“data”,{ get:function() { return data }, set: function(value) ...
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
Javascript 如何监听input输入框值的实时变化
CDamogu
07-26 1万+
/true为IE浏览器，感兴趣的同学可以去搜下，据说是现有最流行的判断浏览器的方法。
实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听
dashan_1200的博客
03-28 1237
思路：通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange（注意ie版本） 监听输入框input时间，人为改变值是可以触发这2个事件的，但是一旦js去改变了就不能实时监听值得改变 <!DOCTYPE html> <html> <head> <meta c...
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
实时监听input输入框value值的变化
dewine0070的博客
08-10 255
1、js 的 oninput & onpropertychange JS中的 oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况： 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checke...
实时监听input的value值改变
qq_41981057的博客
11-26 5878
监听input的value值变化 首先想到的是onchange，该事件必须由鼠标或者键盘激发 $(“xxx”).on(“change”,function(){ alert(“变化了”); }) ie有专属的方法，onpropertychange，仅支持ie内核的浏览器，同样必须由鼠标或者键盘激发 $(“xxx”).on(“propertychange”,function(){ alert(“变化了...
input内容变化的实时监听
dongxianli123的博客
04-28 9121
我们页面中经常需要监听input输入框的value值的变化，常用事件一般有onblur、onchange、oninput、onpropertychange。 但是实际使用中这些事件并不能满足要求，onblur、onchange事件都需要失去焦点后才能触发，而且onchange事件经常触发延迟，有时候达不到想要的效果。 onpropertychange事件能监非自定义属性值的变...
el-input 浏览器自动填充怎么解决
09-06
在使用Vue框架的el-input组件时，浏览器自动填充可能会造成一些问题。浏览器自动填充是浏览器根据用户之前的输入记录和记住密码等信息自动填充输入框内容的功能。但是这个功能也许不符合我们的需求，所以需要解决这个问题。 解决浏览器自动填充的方法有以下几种： 1. 屏蔽自动填充：可以通过设置input标签的autocomplete属性为off来禁止自动填充。 ```html <el-input v-model="inputValue" :autocomplete="'off'" ></el-input> ``` 2. 修改input事件：通过监听input事件，手动更新数据模型中的值，这样可以覆盖浏览器自动填充的内容。 ```html <el-input v-model="inputValue" @input="handleInput" ></el-input> ``` ```javascript methods: { handleInput() { this.inputValue = this.$refs.input.value; // 获取input框的值并更新数据模型 }, }, ``` 3. 利用setTimeout延迟设置值：使用setTimeout可以使得设置值操作在下一次事件循环开始，从而避免被浏览器自动填充的值覆盖。 ```javascript mounted() { setTimeout(() => { this.inputValue = ''; }, 0); }, ``` 4. 结合JavaScript和Vue的解决方案：在mounted钩子函数中使用JavaScript的代码将input框的值清空，并将其焦点移至其他input元素。 ```javascript mounted() { let input = document.getElementById('inputId'); input.value = ''; let otherInput = document.getElementById('otherInputId'); otherInput.focus(); }, ``` 这些方法可以有效解决浏览器自动填充所带来的问题，根据需要选择适合的解决方案即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值