input标签内容转变触发的事宜

原生要领

onchange事宜

<input type="text" onchange="onc(this)">
function onc(data){
    console.log(data.value);
}

onchange事宜在内容转变且落空核心的时刻触发。即,落空核心了内容未变不触发,内容变了未落空核心也不及时触发。
js直接变动value值时不触发

oninput事宜

<input id="inp" type="text" oninput="inp(this)">
function inp(data) {
    console.log(data.value)
}

oninput事宜在输入内容转变的时刻及时触发。oninput事宜是IE以外的大多数浏览器支撑的事宜,在value转变时及时触发。
js直接变动value值时不触发。

onpropertychange事宜

onpropertychange事宜是及时触发,每增添或删除一个字符就会触发,经由过程js转变也会触发该事宜,然则该事宜是IE专有。
当input设置为disable=true后,不会触发。

oninput事宜与onpropertychange事宜的区分:

onpropertychange事宜是任何属性转变都邑触发,而oninput却只在value转变时触发,oninput要经由过程addEventListener()来注册,onpropertychange注册要领与平常事宜雷同。

oninput与onpropertychange团结运用

  oninput 是 HTML5 的规范事宜,关于检测 textarea, input:text, input:password 和 input:search 这几个元素经由过程用户界面发作的内容变化异常有效,在内容修正后立即被触发,不像 onchange 事宜须要落空核心才触发。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" />

运用 jQuery

只须要同时绑定 oninput 和 onpropertychange 两个事宜就能够了,示例代码以下:

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

  末了须要注重的是:oninput 和 onpropertychange 这两个事宜在 IE9 中都有个小BUG,那就是经由过程右键菜单菜单中的剪切和删除敕令删除内容的时刻不会触发,而 IE 其他版本都是一般的。

    原文作者:aimiy
    原文地址: https://segmentfault.com/a/1190000017063820
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞