如何在按鍵修改後獲取HTML輸入的新值？

我有一個HTML輸入框如何在按鍵修改後獲取HTML輸入的新值？

<input type="text" id="foo" value="bar">

我已經附加了「KEYUP」事件的處理程序，但如果我在事件處理過程中檢索輸入框的當前值，我得到的值因爲它是，而不是它會！

我試着拿起'keypress'和'改變'事件，同樣的問題。

我敢肯定這很容易解決，但目前我認爲唯一的解決方案是我將使用短暫的超時在未來幾毫秒內觸發一些代碼！

有沒有辦法在這些事件中獲取當前值？

編輯：看起來像我有我的js文件的緩存問題，因爲我後來檢查相同的代碼，它工作得很好。我會刪除這個問題，但不知道是否會失去代表發佈想法的那類人的代表:)

來源

2008-10-21 Paul Dixon

你可以發佈你的代碼嗎？我沒有發現任何問題。測試在Firefox的3.01/Safari瀏覽器3.1.2：

function showMe(e) { 
// i am spammy! 
    alert(e.value); 
} 
.... 
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

來源

2008-10-21 17:45:01 Owen

我回家了，檢查了我的代碼出了顛覆，它工作得很好。我認爲我必須對js文件有一個緩存問題，並且它堅持處理按鍵而不是按鍵。感謝編寫示例代碼的努力，因此將其標記爲答案:) – 2008-10-21 20:08:28

Here是不同的事件和瀏覽器支持的水平的表。您需要選擇至少在所有現代瀏覽器中支持的事件。

正如您從表格中看到的那樣，keypress和change事件沒有統一支持，而keyup事件沒有。

另外，還要確保您使用的是一個跨瀏覽器兼容的方法連接事件處理程序...

來源

2008-10-21 17:45:02 domgblackwell

<html> 
    <head> 
     <script> 
     function callme(field) { 
      alert("field:" + field.value); 
     } 
     </script> 
    </head> 
    <body> 
     <form name="f1"> 
      <input type="text" onkeyup="callme(this);" name="text1"> 
     </form> 
    </body> 
</html>

看起來你可以使用的onkeyup獲得HTML輸入控制的新值。希望能幫助到你。

來源

2008-10-21 17:47:01

你可以試試這個代碼（需要的jQuery）：

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#foo').keyup(function(e) { 
       var v = $('#foo').val(); 
       $('#debug').val(v); 
      }) 
     }); 
    </script> 
</head> 
<body> 
    <form> 
     <input type="text" id="foo" value="bar"><br> 
     <textarea id="debug"></textarea> 
    </form> 
</body> 
</html>

來源

2008-10-21 17:51:51

有兩種輸入值：字段的財產和字段的html 屬性。

如果你使用keyup事件和field.value，你將得到該字段的當前值。當您使用field.getAttribute（'value'）時，情況並非如此，它會返回html屬性（value =「」）中的內容。該屬性表示輸入到字段中的內容，並且在鍵入時發生更改，而屬性不會自動更改（您可以使用field.setAttribute方法更改它）。

來源

2008-10-21 18:00:56 pawel

給出一個現代方法來解決這個問題。這效果很好，包括Ctrl + v。 GlobalEventHandlers.oninput。

var onChange = function(evt) { 
    console.info(this.value); 
    // or 
    console.info(evt.target.value); 
}; 
var input = document.getElementById('some-id'); 
input.addEventListener('input', onChange, false);

來源

2015-11-26 18:51:49

如何在按鍵修改後獲取HTML輸入的新值？

回答

相關問題