关于实时监听输入框的值的变化

(摘自博客笔记,原文网址:http://www.cnblogs.com/hutuzhu/p/4981877.html?utm_source=tuicool&utm_medium=referral,在原来的基础上有完善)

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

解决办法:

1、使用onchange事件

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

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

HTML 中:

<element     oninput="myScript"/>

JavaScript 中:

object.oninput=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("input",myScript);


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 属性来获取发生变化的属性名称。

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

//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);

}

}



$('textarea').bind('input propertychange',function() {

$('.msg').html($(this).val().length + ' characters');

});


$('textarea').on('input propertychange',function(e) {

if(e.type ==="input"|| e.orignalEvent.propertyName ==="value") {

$('.msg').html(this.value.length +' characters');

}

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 10,198评论 1 3
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,846评论 1 18
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,771评论 19 139
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,397评论 1 10
  • 文/洋气杂货店 —1— 从小妈妈就告诉我,不要怕吃亏,吃亏的人是有福报的,可是我一直不相信。 家里有几个梨,每人一...
    洋气杂货店阅读 7,961评论 0 13