使用 JavaScript 动态输入文本

Question

首先让我说我目前是一名 JavaScript 初学者，如果有人能指出我正确的方向，我将不胜感激，因为我目前有点不知所措。我发现这支笔是用 Vue.js 写的。它做了一些事情，但我对在字段中键入数据时文本以纯 html 显示的功能感兴趣。我想知道如何使用 JavaScript 来实现这一点？https://codepen.io/mitchell-boland/pen/NVZyjXcomputed: {      // Think of this as live updates      reverseString: function() {        if(this.task) {          return this.task.split('').reverse().join('')        }}}})

Answer 1

这是相对简单的。您可以侦听文本框上的“输入”事件，并将文本框的当前值复制到另一个元素中。

在您的示例中，文本也同时被反转，为此您需要一些额外的代码。

这是一个可运行的演示：

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

var output = document.getElementById("output");

//listen to the "input" event and run the provided function each time the user types something

input.addEventListener("input", function() {

  //this line reverses the typed value

  var textOut = this.value.split("").reverse().join("")

  //write the output to another element

  output.innerText = textOut;

});

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

<div id="output"></div>

PS你没有提到你的问题中的文本反转，所以如果你不想要它，你可以通过删除该行并将输入框的值直接写入div元素来简化上面的内容，例如

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

var output = document.getElementById("output");

//listen to the "input" event and run the provided function each time the user types something

input.addEventListener("input", function() {

  //write the output to another element

  output.innerText = this.value;

});

Answer 2

我会将此作为答案发布：如果您想知道输入文本如何变成笔中的反转文本，那么您可能需要这个：

function reverseText(txt){

  document.getElementById("#output").innerText = txt.split("").reverse().join("");

}

<input type="text" onkeyup="reverseText(this.value)" />

<p id="output"></p>