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

我将其发布为答案：如果您想知道笔中输入文本如何变成反向文本，那么您可能需要这样做：

aggregate()

Answer 2

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

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

这是一个可运行的演示：

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>

P.S。您没有在问题中提到文本的反转，因此，如果您不希望反转文本，可以通过删除该行并将输入框的值直接写入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;
});

使用JavaScript动态输入文字

2 个答案: