2009-08-27 19 views
16

所以我的網站有一個輸入框,它有一個onkeydown事件,僅僅提醒輸入框的值。在文本字段中檢測到keydown事件後輸入文本字段的「值」?

不幸的是,輸入的值不包括由於按下鍵而導致的更改。

例如,對於該輸入框中:

<input onkeydown="alert(this.value)" type="text" value="cow" /> 

的缺省值是 「牛」。當您在輸入中按鍵「s」時,您會收到警報(「母牛」)而不是警報(「奶牛」)。如何在不使用onkeyup的情況下提醒(「奶牛」)?我不想使用onkeyup,因爲它感覺不到響應。

一個部分的解決方案是檢測按下的按鍵,然後將其附加到輸入的值,但是在所有情況下都不起作用,例如,如果突出顯示輸入中的文本,然後按下某個鍵,則不適用。

任何人都有完整的解決方案來解決這個問題?

感謝

+0

alert($(「input#recomendar_producto_email」).val()); – 2011-08-31 20:45:06

回答

16

事件處理程序僅在應用更改之前看到內容,因爲mousedowninput事件使您有機會在事件到達該字段之前阻止該事件。

您可以通過在瀏覽器獲取其值之前更新字段內容的方法來解決此限制 - 最簡單的方法是在檢查值之前使用較小的超時值。

一個最小的例子是:

<input id="e" 
    onkeydown="window.setTimeout(function(){ alert(e.value) }, 1)" 
    type="text" value="cow" /> 

此設置一個1ms超時按鍵和的keydown處理之後已經讓控制來改變它的值應該發生的。如果您的顯示器以60fps刷新,那麼在延遲2幀之前,您已經有了16ms的擺動空間。


一個更完整的示例(不依賴於named access on the Window object會是什麼樣子:

var e = document.getElementById('e'); 
 
var out = document.getElementById('out'); 
 

 
e.addEventListener('input', function(event) { 
 
    window.setTimeout(function() { 
 
    out.value = event.target.value; 
 
    }, 1); 
 
});
<input type="text" id="e" value="cow"> 
 
<input type="text" id="out" readonly>

當你運行上面的代碼中,嘗試一些如下:

  • 將光標置於開頭並鍵入
  • 粘貼在文本框中
  • 的中間部分內容選擇一大堆文字和類型來代替它
+0

感謝您的解決方案,但不幸的是,這不起作用的情況下,輸入突出顯示,然後按下一個鍵。例如,如果「奶牛」突出顯示,並按「s」,它會提醒「奶牛」,當它應該提醒「s」時 – rawrrrrrrrr 2009-08-27 02:05:27

+0

是的,我沒有足夠好地閱讀原始問題! – kibibu 2009-08-27 02:19:04

+0

已更新爲包含可用的版本,至少在我的瀏覽器中。 – kibibu 2009-08-27 05:53:21

0

KEYUP /向下事件在不同的瀏覽器不同的處理。簡單的解決方案是使用像mootools這樣的庫,這會使它們表現相同,處理傳播和冒泡,並在回調中爲您提供標準的「this」。

0

據我所知,你不能做到這一點與標準的輸入控制,除非你滾你擁有。

0

請嘗試使用oninput事件。 與onkeydown,onkeypress事件此事件更新控件的值屬性。

<input id="txt1" value="cow" oninput="alert(this.value);" /> 
0

Jquery是這樣做的最佳方式。請參考以下內容:

let fieldText = $('#id'); 
let fieldVal = fieldText.val(); 

fieldText.on('keydown', function() { 
    fieldVal.val(); 
});