98

我试图在用户输入文本框中获取文本（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>

​ 代码运行没有错误，除了box的值，input text期间onKeyPress始终是更改前的值：

在此处输入图像描述

问题：如何获取文本框的文本onKeyPress？

奖金喋喋不休

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

  • onKeyDown
  • onKeyPress
  • onKeyUp

在WindowsWM_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事件仅在用户释放密钥时引发。

带走

  • 我可以回复onKeyDownor ，但在更新onKeyPress之前两者都已提出input.value
  • 我无法回复onKeyUp，因为它不会随着文本框中的文本更改而发生。

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

奖金阅读

4

12 回答 12

55

把事情简单化。同时使用onKeyPress()和onKeyUp()：

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

这负责获取最新的字符串值（在键向上之后），并且如果用户按住键也会更新。

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

于 2012-07-06T16:04:17.507 回答
28

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

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 showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("label").innerText = value;
}
<input type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="label"></span>

于 2019-01-04T14:01:27.533 回答
19

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

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

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

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

于 2012-07-06T16:03:40.663 回答
5

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

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

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

于 2015-03-22T07:40:59.760 回答
3 
<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>
于 2014-09-27T12:04:35.950 回答
3

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

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

更正确的解决方案将处理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 以及我拥有的移动设备上进行了测试。

于 2017-08-30T02:36:46.850 回答
1

我通常将字段的值（即在更新之前）与与键事件关联的键连接起来。以下使用最近的 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 的评论。]

于 2012-07-06T16:05:10.960 回答
1

简单的...

在您的 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
}
于 2013-05-02T16:33:02.220 回答
1

因此，每个事件都有优点和缺点。事件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)" />

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

于 2015-09-11T18:28:42.817 回答
1

通过使用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()" />

于 2017-05-03T08:12:44.357 回答
0

尝试将事件 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;
}

in 中的值ab将获取输入字段中的最新值。

于 2016-07-13T07:29:30.003 回答
0

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

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

HTML

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

代码

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}
于 2020-08-09T03:32:03.970 回答