如何检测用户在HTML和JavaScript的输入框中输入的内容

Question

我想让我的输入框检测这样的文本…

var input = document.getElemntById("inputbox");
function buttonclick() {
if ((input = "h")) {
input.innerHTML = "hello";
}
}

这是通过按钮点击，但我需要做这个onkeyup()，但我不知道如何…如果用户输入h，输入框突然变成hello我该怎么做呢?提前谢谢。

Answer 1

你只需要一个onkeyup事件在你的html标签。

var input = document.getElementById("inputbox");
function buttonclick() {
if (input.value === "h") {
input.value = "hello";
}
}

<input id="inputbox" onkeyup="buttonclick()">

键被解除时，函数buttonclick()被调用。您还需要获取输入的value，因为innerHTML不是指放置在输入框中的内容，而是指位于两个<div> </div>标记之间的实际代码。

Answer 2

添加eventListener:

document.getElementById("inputbox").addEventListener("keyup", (e) => {
if (e.target.value == "h") e.target.value = "hello"
}

Answer 3

您必须做以下更改才能工作:

1)TYPO:你应该用getElementById而不是getElemntById

var input = document.getElementById("inputbox");

2)您可以使用keyup事件作为

input.addEventListener( "keyup", changeInputValue )

3)当您检查两个字符串是否相等时，使用===。=是用于分配的。

input.value.trim() === "h"

4)您必须将input的value与h进行比较。

input.value.trim() === "h"

NOTE:我使用trim方法，因为如果用户添加了一些空间在h之前，它仍然设置hello。你可以去掉它，如果你不想。

var input = document.getElementById("inputbox");
function changeInputValue() {
if (input.value.trim() === "h") {   // input.value === "h" 
input.value = "hello";
}
}
input.addEventListener("keyup", changeInputValue)

<input type="text" id="inputbox" />