Question

我试图在文本框中输入用户输入文本（jsfiddle playground）：

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);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

代码运行没有错误，但input text框中的值，在onKeyPress期间始终是之前的值 >改变：

问题：如何在onKeyPress期间获取文本框的文字？

Bonus Chatter

在HTML DOM中有三个与“用户正在输入”相关的事件：

onKeyDown

onKeyPress

onKeyUp

在 Windows 中，当用户按住某个键并且该键开始重复时，WM_Key消息的顺序变得很重要：

WM_KEYDOWN('a') - 用户已按下 A 键

WM_CHAR('a') - 已收到用户<{1}}个字符

a - 已收到用户<{1}}个字符

WM_CHAR('a') - 已收到用户<{1}}个字符

a - 已收到用户<{1}}个字符

WM_CHAR('a') - 已收到用户<{1}}个字符

a - 用户已发布 A 键

将导致文本控件中出现五个字符：WM_CHAR('a')

重要的一点是，您回复了a消息，即重复的消息。否则，在按下某个键时会错过事件。

在 HTML 中，情况略有不同：

WM_CHAR('a')

a

WM_KEYUP('a')

aaaaa

WM_CHAR

onKeyDown

onKeyPress

onKeyDown

onKeyPress

onKeyDown

onKeyPress

Html每次重复发送onKeyDown和onKeyPress。并且只有在用户释放密钥时才会引发onKeyDown事件。

带走

我可以回复onKeyPress或onKeyUp，但在KeyDown更新之前，两者仍然有效

我无法回复KeyPress，因为它不会发生，因为文本框中的文字会发生变化。

问题：如何在KeyUp期间获取文字框的文字？

奖金阅读

Getting a form value with jQuery

Get the value in an input text box

Answer 1

保持简单。同时使用onKeyPress()和onKeyUp()：

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

这样可以获取最新的字符串值（在按键启动后），如果用户按下某个键，也会更新。

jsfiddle：http://jsfiddle.net/VDd6C/8/

Answer 2

输入文本框的值，在onKeyPress期间始终是更改前的值

这是故意的：这允许事件监听器取消按键。

如果事件侦听器cancels the event，则不更新该值。如果事件未取消，则更新值，但在调用事件侦听器后。

要在更新字段值后获取值，请安排函数在下一个事件循环上运行。通常的方法是使用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）不会触发退格键的按键事件;将keypress更改为代码中的keyup。

Answer 3

保持紧凑。
每按一次键，调用函数edValueKeyPress() 您还在该函数中声明并初始化了一些变量 - 这会减慢进程并且还需要更多的CPU和内存。
您可以简单地使用此代码 - 源自简单替换。

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

这就是你想要的一切，而且速度更快！

Answer 4

处理input事件是一个一致的解决方案：在所有现代浏览器中，textarea和input元素都是supported，并且会准确触发何时需要：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

不过，我会重写一下：

function edValueKeyPress(event)
{
    let value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

<input id="edValue" type="text" onInput="edValueKeyPress(event)"><br>
The text box contains: <span id="lblValue"></span>

Answer 5

<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>

Answer 6

到目前为止，答案都没有提供完整的解决方案。有很多问题需要解决：

并非所有按键都传递给keydown和keypress处理程序（例如某些浏览器会禁止退格键和删除键）。
处理keydown不是一个好主意。有些情况下，keydown不会导致按键！
setTimeout()样式解决方案在Google Chrome / Blink网络浏览器下延迟，直到用户停止输入。
鼠标和触摸事件可用于执行剪切，复制和粘贴等操作。这些事件不会触发键盘事件。
根据输入法，浏览器可能无法发送元素已更改的通知，直到用户离开该字段为止。

更正确的解决方案将处理keypress，keyup，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/

处理所有四个事件会捕获所有边缘情况。使用来自用户的输入时，应考虑所有类型的输入方法，并应验证跨浏览器和跨设备功能。上面的代码已经在桌面上的Firefox，Edge和Chrome以及我拥有的移动设备上进行了测试。

Answer 7

我通常使用与键事件关联的键连接字段的值（即在更新之前）。以下使用最近的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.上面的代码适用于前者，但需要进一步修改以允许后者和其他一些可能性。请参阅下面的Ian Boyd的评论。]

Answer 8

容易......

在你的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
}

Answer 9

因此每项活动都有优点和缺点。事件onkeypress和onkeydown不会检索最新值，onkeypress不会触发某些浏览器中的不可打印字符。 onkeyup事件无法检测何时按住多个字符的键。

这有点hacky，但做的事情就像

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)" />

似乎处理了所有世界中最好的。

Answer 10

通过使用 event.key ，我们可以在输入HTML输入文本框之前获取值。这是代码。

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()" />

Answer 11

尝试将事件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中的值将获得输入字段中的最新值。

Answer 12

有一个更好的方法可以做到这一点。使用concat方法。例子

声明一个全局变量。这在角度10上效果很好，只需将其传递给Vanilla JavaScript。示例：

HTML

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

CODE

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}

如何在onKeyPress期间获取输入文本框的文本？

Bonus Chatter

奖金阅读

12 个答案: