檢測輸入型文本編程更改

是否有當腳本改變輸入型文本的價值得到通知的方式。檢測輸入型文本編程更改

我

<input id='test' type='text' />

和腳本

document.getElementById('test').value = 'bbb';

我想通知文本的變化。

我知道我可以用的keydown，KEYUP，被通知的onblur諸如此類而是如果換以編程方式做了什麼（如果我想跟蹤用戶打字其中工程）？

非常感謝

附：沒有JQuery請或如果jQuery它可以有人解釋它是如何實現它。

來源

2013-04-15 Zo72

在它調用的document.getElementById（「測試」）的腳本。value ='bbb'; Ÿ你不打電話功能 – 999k

@ 555K我要註冊什麼？例如，如果我正在輸入document.getElementById（'test'）。onkeyup = function（）{...}不起作用 – Zo72

一個想法是從DOMElement「繼承」，定義一個「值」屬性getter和setter（如@MaxArt提出的）並且在getter和setter中使用DOMElement的原始「值」屬性。 –

如果你正在處理一個現代的瀏覽器，你可以用這樣的嘗試：

var input = document.getElementById('test'); 
input._value = input.value; 
Object.defineProperty(input, "value", { 
    get: function() {return this._value;}, 
    set: function(v) { 
     // Do your stuff 
     this._value = v; 
    } 
});

這個解決方案是好的，如果你真的不希望任何用戶輸入（即隱藏類型輸入字段），因爲它的極具破壞性的的DOM基本功能。記住這一點。

來源

2013-04-15 10:52:02 MaxArt

看來，當你重新定義'value'-attribute時，輸入字段不再與'value'屬性「連接」。 –

@MaxArt真的很聰明......但是有沒有副作用？我有點擔心重新定義'value'屬性 – Zo72

@ Zo72副作用主要是Jasd提到的副作用，以及如果用戶鍵入新值就沒有辦法檢測到他輸入的內容的問題，除非你將捕捉每一個關鍵事件並對其進行解釋。這已經是一團糟了，但如果你添加剪切/複製/粘貼事件，它會變得巨大。 – MaxArt

-1

立即跟蹤如果更改已經完成將是唯一的辦法：

var value = document.getElementById('test').value; 

function trackChanges(oldVal) { 
    var newVal = document.getElementById('test').value; 

    if (newVal !== oldVal) { 
     alert('Changes occured!'); 
    } 

    var fn = function() { trackChanges(newVal); }; 

    setTimeout(fn(),100); 
} 

setTimeout(trackChanges(value), 100);

這意味着要調用由其自身稱爲每100 milisecond檢查一個變化已經完成的功能。

也許你看着更好的東西，當你試圖只測試是否有其他事情發生，例如一個點擊一個元素也許......

來源

2013-04-15 10:42:06

farina謝謝，是的，setTimeout可以工作，但這是一個可怕的方式。此外，總會有一些延遲（例如100毫秒） – Zo72

我覺得最簡單的方法是實際手動觸發事件：

document.getElementById('test').value = 'bbb'; 
var evt = new CustomEvent('change'); 
document.getElementById('test').dispatchEvent(evt);

只是聽change事件，當值編程改變是容易出錯。但是，由於您正在更改該值，請添加兩行並觸發更改事件，並使用CustomEvent。

，那麼你就可以抓住這個change事件，無論是內聯：

<input id="test" onchange="console.log(this)">

或向監聽器：

document.getElementById('test').addEventListener('change',function(event) { 
    console.log(event.target); 
});

這具有的優點是，如果你有一個輸入，可以用戶可以改變，你可以捕捉這兩個事件（從用戶或腳本）

然而這依賴於事實，你是自己編程改變輸入的值。如果您正在使用更改輸入值的庫（例如datepickr），則可能需要訪問代碼並在正確的位置添加這兩行。

來源

2015-05-07 19:53:54

檢測輸入型文本編程更改

回答

相關問題