利用原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值

原生JS中可以使用oninput,onpropertychange,onchange

oninput，onpropertychange，onchange的用法

1) onchange 觸發(fā)事件必須滿足兩個(gè)條件：

a)當(dāng)前對(duì)象屬性改變，并且是由鍵盤或鼠標(biāo)事件激發(fā)的(腳本觸發(fā)無(wú)效)

b)當(dāng)前對(duì)象失去焦點(diǎn)(onblur)；

2) onpropertychange ，只要當(dāng)前對(duì)象屬性發(fā)生改變，都會(huì)觸發(fā)事件，但是它是IE專屬的；

3) oninput?是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點(diǎn)不同，它綁定于對(duì)象時(shí)，并非該對(duì)象所有屬性改變都能觸發(fā)事件，它只在對(duì)象value值發(fā)生改變時(shí)奏效。

請(qǐng)輸入字符：

---

你是輸入的字符為:

var input = document.getElementById('d0')

var div = document.getElementById('d1');

input.oninput = function(){

div.innerHTML = input.value;

}

4)Object.defineProperty()類似于Vue的MVVM雙向數(shù)據(jù)綁定

通過(guò)Object.defineProperty(obj, prop, descriptor)劫持對(duì)象的屬性讀寫，其中obj是要在上面定義屬性的對(duì)象，prop是要定義或修改的屬性名稱，descriptor是屬性的描述符。描述符中可選get和set鍵值。get是屬性的getter方法，返回屬性值；set為setter方法，接受唯一參數(shù)，并將該參數(shù)的值賦值給屬性，get和set的默認(rèn)值均為undefined。

Document

function defineProperty(obj, attr){

var val;

Object.defineProperty(obj, attr, {

get: function () {

return val;

},

set: function (newValue) {

if (newValue === val){

return;

}

val = newValue;

document.getElementById("input").value = newValue;

document.getElementById("show").innerHTML = newValue;

}

});

}

var obj = {};

defineProperty(obj, "txt");

document.getElementById("input").addEventListener("keyup", function(e){

obj.txt = e.target.value;

})

不斷更新，如遺漏錯(cuò)誤，歡迎留言

參考文獻(xiàn)：

Object.defineProperty()

【JavaScript學(xué)習(xí)筆記】自己實(shí)現(xiàn)雙向綁定

剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM

Vue.js雙向綁定的實(shí)現(xiàn)原理

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的html 监听input输入框的值,利用原生JS实时监听input框输入值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。