javascript---实时监听输入框值的变化

author author     2022-08-04     192

关键词:

  时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输入时候也无法监听到!

解决办法:

1、使用onchange事件

onchange事件是文本框内容改变并失去焦点的时候才触发。

2、比较完美的解决办法:oninput和onproper

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:

技术分享

从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
  • 修改了 select 元素的选中项,selectedIndex 属性发生变化。

在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下:

// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
       alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
           alert ("The new content: " + event.srcElement.value);
     }
}

 

页面结构如下:

<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

 

然后调用函数:

$(‘textarea‘).bind(‘input propertychange‘, function() {
    $(‘.msg‘).html($(this).val().length + ‘ characters‘);
});

 

jquery实时监听输入框值变化

在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。首先看一下dom中元素... 查看详情

如何实时监听input和textarea输入框值的变化

参考技术A在实际前端开发中我们经常会遇到要实时监听用户的输入,根据不同的输入值来采取不同的措施。举一个常见的例子:我们在使用Google搜索框进行搜索时,每多输入一个字,搜索框下方显示的匹配结果会实时变化。这... 查看详情

实时监听输入框值变化的完美方案:oninput&onpropertychange

实时监听输入框值变化的完美方案:oninput&onpropertychange:网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html 查看详情

html5实时监听输入框值变化的完美方案:oninput&onpropertychange

结合HTML5标准事件oninput和IE专属事件onpropertychange事件来监听输入框值变化。 H5手机端:<inputtype="text"placeholder="请输入金额"value=""oninput="only_number(this)">//输入框,限金额functiononly_number(obj){//先把非数字的都替换掉,除了数... 查看详情

实时监听输入框值变化的完美方案:oninput&onpropertychange

  在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦。因此这篇文... 查看详情

这才是实时监听输入框值变化的完美方案

...能用于快速模糊查找和添加数据当输入“t“字母的时候实时列出10条物料名称、简拼、型号等字段中包含T字母的数据当然可以输入汉字查询,包含更多的字段模糊查询,列出更多条数据和按照某些(出入库频率,使用频率)字... 查看详情

实时监听输入框值变化的完美方案:oninput&onpropertychange

  oninput是 HTML5 的标准事件,对于检测 textarea,input:text,input:password和input:search这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像onchange事件需要失去焦点才触发。oninput 事件在主... 查看详情

input即时搜索监听输入值的变化

在Web开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦。因此这篇文章向大家介绍... 查看详情

使用jquery实时监听input输入值的变化

//jQuery实时监听input值变化$("#email").on("inputpropertychange",function(){varstr=$(this).val();console.log(str);//alert(str);});  查看详情

实时监听输入框

平时WEB开发中经常会碰到需要动态监听输入框值变化的情况:  首先想到:onchange、onkeydown、onkeypress、onkeyup;  不过:    onchange:在元素失去焦点时触发(支持<select>);    onkeydown、onkeypress、onkeyup:可以... 查看详情

实时监控input输入值变化

在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown、onkeypress、onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案:HTML5... 查看详情

实时监听input输入框value的变化:(代码片段)

....0+Yes  示例:HTML:<inputtype="text"oninput="onInput()">JavaScript:<scripttype="text/javascript">functiononInput()console.log("正在输入...");</scr 查看详情

javascript之限制输入框值的整数小数位数(代码片段)

    工作中,经常能够碰到产品提的需求:限制数字输入框的小数只能输入多少多少位,更有甚者,还会限制输入的整数只能输入多少多少位,或者还有同时限制整数位以及小数位的情况;  实现的... 查看详情

javascript之限制输入框值的整数小数位数(代码片段)

    工作中,经常能够碰到产品提的需求:限制数字输入框的小数只能输入多少多少位,更有甚者,还会限制输入的整数只能输入多少多少位,或者还有同时限制整数位以及小数位的情况;  实现的... 查看详情

实时监听移动端输入框的变化

一个常见需求,实时监听textarea的输入变化,并在页面上显示还能够输入多少字符。开发过程中翻了两个形式错误:1、仅仅使用onkeyup事件2、使用zepto绑定事件的时候,经验主义错误  第三方输入法在输入拼音的时候,并... 查看详情

uitextfield实时监听输入文本的变化(代码片段)

1[textFieldaddTarget:selfaction:@selector(textFieldChanged:)forControlEvents:UIControlEventEditingChanged];23-(void)textFieldChanged:(UITextField*)textField45NSString*_string=textField.text;67  查看详情

如何使用 Javascript 从输入框值中获取总和?

】如何使用Javascript从输入框值中获取总和?【英文标题】:HowgettotalsumfrominputboxvaluesusingJavascript?【发布时间】:2012-11-1212:10:38【问题描述】:我在Javascript方面并不完美。我想在不刷新页面的下一个名为total的输入框中显示在qty... 查看详情

javascript使用htmldom的oninput事件,实时监听value值变化

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>该实例演示了如何使用addEventListener()方法向input元素中添加"oninput"事件 查看详情