如何在onKeyPress中获取input文本框的文本？
我试图让文本框中的用户键入它（ jsfiddle操场 ）：
<html> <body> <input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br> <span id="lblValue">The text box contains: </span> </body> <script> function edValueKeyPress() { var edValue = document.getElementById("edValue"); var s = edValue.value; var lblValue = document.getElementById("lblValue"); lblValue.innerText = "The text box contains: "+s; //var s = $("#edValue").val(); //$("#lblValue").text(s); } </script> </html> 代码运行时没有错误，只是在onKeyPress期间input text框的值始终是更改前的值：
问 ：如何在
onKeyPress获取文本框的文本？
奖金喋喋不休
在HTML DOM中有三个与“用户正在input”相关的事件：
-
onKeyDown -
onKeyPress -
onKeyUp
在Windows中 ，当用户按下一个键时， WM_Key消息的顺序变得重要，并且键开始重复：
-
WM_KEYDOWN('a')– 用户已经按下了A键 -
WM_CHAR('a')– 从用户处收到a字符 -
WM_CHAR('a')– 从用户处收到a字符 -
WM_CHAR('a')– 从用户处收到a字符 -
WM_CHAR('a')– 从用户处收到a字符 -
WM_CHAR('a')– 从用户处收到a字符 -
WM_KEYUP('a')– 用户释放了A键
将导致出现在文本控件中的五个字符： aaaaa
重要的一点是你响应WM_CHAR消息，重复的消息。 否则，当按下某个键时，您将错过事件。
在HTML中，情况稍有不同：
-
onKeyDown -
onKeyPress -
onKeyDown -
onKeyPress -
onKeyDown -
onKeyPress -
onKeyDown -
onKeyPress -
onKeyDown -
onKeyPress -
onKeyUp
Html提供KeyDown和KeyPress每个键重复。 而KeyUp事件仅在用户释放密钥时引发。
拿走
- 我可以响应
onKeyDown或onKeyPress，但都是在input.value更新之前仍然提出 - 我不能回应
onKeyUp，因为它不会发生文本框中的文本更改。
问：如何在onKeyPress期间onKeyPress文本框的文本？
奖金阅读
- 使用jQuery获取表单值
- 获取input文本框中的值
把事情简单化。 同时使用onKeyPress()和onKeyUp() ：
<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
这需要获取最新的string值（在键之后），并且如果用户按下键也会更新。
jsfiddle： http : //jsfiddle.net/VDd6C/8/
onKeyPress期间input文本框的值始终是更改前的值
这是有目的的：这允许事件监听器取消按键。
如果事件侦听器取消该事件 ，则该值不会更新。 如果该事件未被取消，则该值被更新，但在事件监听器被调用之后 。
要在字段值更新后获取值，请安排一个函数在下一个事件循环中运行。 通常的做法是调用setTimeout ，超时时间为0 ：
$('#field').keyup(function() { var $field = $(this); // this is the value before the keypress var beforeVal = $field.val(); setTimeout(function() { // this is the value after the keypress var afterVal = $field.val(); }, 0); });
试试这里： http : //jsfiddle.net/Q57gY/2/
编辑 ：某些浏览器（例如Chrome）不会触发用于退格的按键事件; 改变了按键以在代码中键入。
<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%; margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } </script>
保持紧凑。
每按一次键，函数edValueKeyPress()被调用。
你也已经声明和初始化了这个函数中的一些variables – 这会减慢进程，并且需要更多的CPU和内存。
你可以简单地使用这个代码 – 从简单的替代派生。
function edValueKeyPress() { document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value; }
这就是你想要的，更快！
我通常将字段的值（即更新之前）与关键事件关联的键连接起来。 以下使用最近的JS，所以需要调整旧IE的支持。
最近的JS例子
document.querySelector('#test').addEventListener('keypress', function(evt) { var real_val = this.value + String.fromCharCode(evt.which); if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2); alert(real_val); }, false);
支持较老的IE例子
//get field var field = document.getElementById('test'); //bind, somehow if (window.addEventListener) field.addEventListener('keypress', keypress_cb, false); else field.attachEvent('onkeypress', keypress_cb); //callback function keypress_cb(evt) { evt = evt || window.event; var code = evt.which || evt.keyCode, real_val = this.value + String.fromCharCode(code); if (code == 8) real_val = real_val.substr(0, real_val.length - 2); }
[编辑 – 这种方法，默认情况下，禁用按键后退空间CTRL + A。 上面的代码适用于前者，但需要进一步修补以允许后者和其他一些事件。 见伊恩·博伊德的评论如下。]
简单…
在你的keyPress事件处理程序中，写入
void ValidateKeyPressHandler(object sender, KeyPressEventArgs e) { var tb = sender as TextBox; var startPos = tb.SelectionStart; var selLen= tb.SelectionLength; var afterEditValue = tb.Text.Remove(startPos, selLen) .Insert(startPos, e.KeyChar.ToString()); // ... more here }
所以每个事件都有好处和坏处。 onkeypress和onkeydown事件不检索最新的值， onkeypress不会触发非打印字符在某些浏览器。 onkeyup事件不检测何时按住多个字符的键。
这是一个小黑客，但是做一些像
function edValueKeyDown(input) { var s = input.value; var lblValue = document.getElementById("lblValue"); lblValue.innerText = "The text box contains: "+s; //var s = $("#edValue").val(); //$("#lblValue").text(s); }
<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />
似乎处理所有世界上最好的。
通过使用event.key，我们可以在HTMLinput文本框中input值。 这是代码。
function checkText() { console.log("Value Entered which was prevented was - " + event.key); //Following will prevent displaying value on textbox //You need to use your validation functions here and return value true or false. return false; }
<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />
迄今没有任何答案提供了一个完整的解决scheme。 有很多问题需要解决：
- 不是所有的按键都传递到
keydown和keypress处理程序（例如，退格键和删除键被某些浏览器所抑制）。 - 处理
keydown不是一个好主意。 有些情况下keydown不会导致按键！ - 在Google Chrome浏览器/ Blink浏览器中，
setTimeout()样式解决scheme会延迟，直到用户停止input。 - 鼠标和触摸事件可用于执行剪切，复制和粘贴等操作。 这些事件不会触发键盘事件。
- 根据input法，浏览器可能不会传递元素已经改变的通知，直到用户离开字段。
更正确的解决scheme将处理keypress ， input ， input和change事件。
例：
<p><input id="editvalue" type="text"></p> <p>The text box contains: <span id="labelvalue"></span></p> <script> function UpdateDisplay() { var inputelem = document.getElementById("editvalue"); var s = inputelem.value; var labelelem = document.getElementById("labelvalue"); labelelem.innerText = s; } // Initial update. UpdateDisplay(); // Register event handlers. var inputelem = document.getElementById("editvalue"); inputelem.addEventListener('keypress', UpdateDisplay); inputelem.addEventListener('keyup', UpdateDisplay); inputelem.addEventListener('input', UpdateDisplay); inputelem.addEventListener('change', UpdateDisplay); </script>
小提琴：
http://jsfiddle.net/VDd6C/2175/
处理所有四个事件捕捉所有的边缘情况。 处理来自用户的input时，应考虑所有types的input方法，并validation跨浏览器和跨设备function。 上述代码已经在桌面上的Firefox，Edge和Chrome以及我自己的移动设备上进行了testing。
尝试将事件charCode连接到您获得的值。 这里是我的代码示例。
<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10"> <p id="demo"></p>
JS：
function cnum(event, str) { var a = event.charCode; var ab = str.value + String.fromCharCode(a); document.getElementById('demo').innerHTML = ab; }
ab的值将获得input字段中的最新值。
