如何在Javascript中通过文本输入键盘按键调用函数？

Question

如何在Javascript中通过文本输入键盘按键调用函数？

4

With

<input type="text" onKeyPress="alert(this.value)">

警告框显示的是框中的值，不包括当前按下的键。然而，这种行为并不相同，我不知道为什么。

<input type="text" onKeyPress="handleInput(this.value)">

function handleInput(value){
    alert(value);
}

新增了这个 http://jsfiddle.net/abalter/adbbb599/6/

- abalter

代码里是这个顺序吗？你先定义了输入，然后再定义函数？ - Austin Mullins

我的代码有什么问题？http://jsfiddle.net/abalter/adbbb599/4/ - abalter

也许使用 onkeyup 更好？ - jkd

@AustinMullins嗯，我把js文件加载在头部。但是，我刚刚尝试将js文件加载在闭合的html标签之后，现在它可以工作了。我对此感到困惑。 - abalter

我认为这与浏览器何时以及如何解析对函数的引用有关。在不同的浏览器中可能会有所不同。显然，在触发定义函数的“onload”事件之前，浏览器尝试解析“onkeypress”处理程序。@hamism的答案适用于来自文件的脚本。 - Austin Mullins

3个回答

2

它应该表现出相同的行为。确保你在head或body标签中加载javascript，这样你就可以从html访问函数。

这段代码对我有效：

<input type="text" onKeyPress="handleInput(this.value)">
    <script>
        function handleInput(value){
            alert(value);
        }
    </script>

- Kjell Ivar

在实际版本中，我将其加载到头部。在 jsfiddle 中，它只是存在那里。 - abalter

在 jsfiddle 中，您可以指定它在左侧加载的位置。您将其设置为默认值，即 window.onload。这会隐藏函数，但如果按照 hamism 上面指定的方式执行，则会起作用。您还可以在 jsfiddle 中设置 wrap in <head> 或 wrap in <body>。 - Kjell Ivar

按照你说的做可以。谢谢。但我想把js放在一个.js文件中。hamism的方法在js文件中有效，但只有在我在html之后加载js时才有效。 - abalter

以这种方式也适用于JS文件，只需添加<script src="/path/file.js"></script>即可，但我同意@hamism的观点，最好避免将JS代码放在HTML标签中。 - Kjell Ivar

1

将'value'作为参数传递通常是不可行的 - 它是保留字。你的'this'指的是输入字段，所以'this.value'返回整个输入字段的内容。要从keypress事件中获取keyCode，请尝试：

<body>
<input type="text" onKeyPress="handleInput();">
</body>
<script>
function handleInput(){
    alert(event.charCode);
}
</script>

这不适用于：

onKeyPress="event.charCode;"

或者：

onKeyPress="this.event.charCode;"

因为没有事件对象被创建。

- JMP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ismnoiet · Accepted Answer

首先，避免在HTML标签内使用JS代码，这是一种不好的做法。你可以使用keyup事件，在用户释放任何按键后获取输入内容。

<input id="input">

<script>
  var input = document.getElementById('input');
  input.addEventListener('keyup',function(){alert(input.value);});

</script>