利用原生JS實時監聽input框輸入值

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

oninput，onpropertychange，onchange的用法

1) onchange 觸發事件必須滿足兩個條件：

a)當前對象屬性改變，并且是由鍵盤或鼠標事件激發的(腳本觸發無效)

b)當前對象失去焦點(onblur)；

2) onpropertychange ，只要當前對象屬性發生改變，都會觸發事件，但是它是IE專屬的；

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

請輸入字符：

---

你是輸入的字符為:

var input = document.getElementById('d0')

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

input.oninput = function(){

div.innerHTML = input.value;

}

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

通過Object.defineProperty(obj, prop, descriptor)劫持對象的屬性讀寫，其中obj是要在上面定義屬性的對象，prop是要定義或修改的屬性名稱，descriptor是屬性的描述符。描述符中可選get和set鍵值。get是屬性的getter方法，返回屬性值；set為setter方法，接受唯一參數，并將該參數的值賦值給屬性，get和set的默認值均為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;

})

不斷更新，如遺漏錯誤，歡迎留言

參考文獻：

Object.defineProperty()

【JavaScript學習筆記】自己實現雙向綁定

剖析Vue原理&實現雙向綁定MVVM

Vue.js雙向綁定的實現原理

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。