Question

如何在OnKeyPress事件后获取文本框的值？例如，假设我有以下代码：

<input type = "number" id = "foo" onKeyPress = "submit();"/>
<script type = "text/javascript">
function submit()
{
var textValue = document.getElementById("foo").value;
alert(textValue);
}
</script>

不幸的是，这不起作用，因为在OnKeyPress被触发后，变量textValue仍将是一个字符。我会使用OnKeyUp，但遗憾的是它不能在Android设备上运行，除非<input type = "text">在我的情况下不起作用......有没有人知道这样做的方法？

Answer 1

我建议使用input事件，它会在对输入值进行任何更改后触发（例如，通过键入字符，删除，粘贴和拖放）。这适用于除IE＆lt;之外的所有主流浏览器。 9。

document.getElementById("foo").addEventListener("input", function() {
    alert("CHANGED!");
}, false);

Answer 2

尝试以下代码

<input type = "number" id = "foo" onKeyPress = "submit(this);"/>
    <script type = "text/javascript">
    function submit(e) {
      alert(e.value);
    }
    </script>

Answer 3

如果唯一的问题是Android设备，我建议为其他人使用onkeyup。然后你可以检测它是否是android（或者如果输入支持keyup），并且如果需要，可以实现Android特定的解决方案。

function submit(){
    function submitNow() {
        var textValue = document.getElementById("foo").value;
        alert(textValue);
    }   
    if(isAndroid) {
        setTimeout(submitNow, 10);
    }
    else {
        submitNow() ;
    }
}

var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; 
var eventType = (isAndroid) ? "keyup" : "keypress" ;
document.getElementById("foo").addEventListener(EventType, submit);

然后，您可以从输入中删除onKeyPress = "submit();"。

当不在Android上时，此代码将使用keyup事件正常运行。当客户端在Android上时，它将等待1/100秒，足够的时间让输入更新，但是太短而不明显。

通常情况下，我会警告长按键，但我不知道支持它们的Android键盘。

仅限Android解决方案：

function submit(){
    function submitNow() {
        var textValue = document.getElementById("foo").value;
        alert(textValue);
    }   
    setTimeout(submitNow, 10);
}

document.getElementById("foo").addEventListener("keyup", submit);

如果你真的觉得这样，你甚至可以保留你的onKeyPress = "submit();"。只需删除最后一行。

Answer 4

您是否尝试过使用jQuery？

要简单地将jQuery添加到您的页面 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>位于页面的头部。

然后执行您需要的操作使用代码

<script type="text/javascript">
  $("#my_field").keydown (function (e) {
      alert ($(this).val());
  });
</script>

其中#myField是您字段的ID。

N.B您将不再需要输入中的按键事件。

如何在OnKeyPress事件之后获取输入表单元素的值？

4 个答案:

仅限Android解决方案：