使用 JavaScript 动态输入文本

Question

首先让我说我目前是一名 JavaScript 初学者，如果有人能指出我正确的方向，我将不胜感激，因为我目前有点不知所措。

我发现这支笔是用 Vue.js 写的。它做了一些事情，但我对在字段中键入数据时文本以纯 html 显示的功能感兴趣。

我想知道如何使用 JavaScript 来实现这一点？

https://codepen.io/mitchell-boland/pen/NVZyjX

computed: {

      // 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 somethinginput.addEventListener("input", function() {&nbsp; //this line reverses the typed value&nbsp; var textOut = this.value.split("").reverse().join("")&nbsp; //write the output to another element&nbsp; 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 somethinginput.addEventListener("input", function() {&nbsp; //write the output to another element&nbsp; output.innerText = this.value;});

Answer 2

我会将此作为答案发布：如果您想知道输入文本如何变成笔中的反转文本，那么您可能需要这个：function reverseText(txt){&nbsp; document.getElementById("#output").innerText = txt.split("").reverse().join("");}<input type="text" onkeyup="reverseText(this.value)" /><p id="output"></p>