Question

当我在其中输入值时，很难更改输入值。

var t = document.createElement('div');

t.innerHTML = '<input type="text" id="myText">';
document.getElementById("news").appendChild(t);
     
var x = document.getElementById("myText").value; //Grabs the value of the input. 
     
t.onchange = function(){myFunction()} //Input. Onchange..
function myFunction() {
  console.log(x); //Logs the value of "x"
}

我的问题是当我在输入中键入一些字符串时。以“你好世界”为例。它应该在控制台上打印“ Hello world”。相反，它不打印任何内容。只是一个空白行。我该如何打印在输入框中输入的内容？

使用我的脚本。

Answer 1

仅当您离开输入字段时，才会触发“更改”事件。您可能希望在此处立即触发一个“输入”事件，并向oninput
x是仅初始化一次的变量，并且变量未绑定到用于初始化变量的当前值，因此您需要再次读取元素的值
将函数直接绑定到事件，以便它可以使用this直接访问元素
将事件添加到输入元素，而不是div

document.getElementById("myText").oninput = myFunction;

function myFunction() {
  console.log(this.value)
}

Answer 2

由于我们在div上没有onchange，因此它在输入元素上。

更改和 onkeyup 之间的差异。（MDN）

onkeyup —当用户释放先前按下的键时，将触发keyup事件。

因此，无论何时更改值，它都会被触发。

onchange -当用户向表单控件提交值更改时触发change事件。例如，可以通过单击控件外部或使用Tab键切换到其他控件来完成此操作。

因此，除非您tab或在输入之外单击，否则不会调用该函数。

您应将代码替换为以下内容。

var t = document.createElement('div');
t.innerHTML = '<input type="text" id="myText">'

document.getElementById("news").appendChild(t);


var input = document.getElementById('myText');
input.onkeyup = myFunction

function myFunction() {
  var x = document.getElementById("myText").value; //Grabs the value of the input. 
  console.log(x); //Logs the value of "x"
}

<div id="news"/>

输入值不变

2 个答案: