Question

这可能是荒谬的。但我正在逐步跟踪一些教程代码，以便在我发短信时改变textarea框的颜色，并且工作正常（在写入时将文本更改为大写和红色），但我只想要改变一个单词。在另一个问题中，他们使用div标记元素，但我想使用textarea标记元素。有人能指出我正确的方向吗？

所以，这是代码：

document.getElementById("text").addEventListener("keypress", colors);

function colors() {
  var x = document.getElementById("text");
  var word = document.getElementById("text").value;
  x.value = x.value.toUpperCase();
  x.style.color = "red";
  
}

<textarea name="text" id="text">Some text</textarea>

Answer 1

你真的不能用textarea做到这一点。幸运的是，您可以使用div来模拟textarea，这样您仍然可以通过将contenteditable="true"添加到标记

来在其中进行编辑

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Answer 2

您可以为每个单词创建<textarea>元素，使用带有if函数的colors条件在color属性设置style该特定<textarea> 1}}元素.value。

textarea {
  border: none;
  outline: none;
  font-size: 14px;
  width: 50px;
  height: 16px;
  resize: none;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

<textarea name="text1" class="text">Hello </textarea><textarea name="text2" class="text">World</textarea>
<script>
  var textareas = document.querySelectorAll("textarea");

  for (var i = 0; i < textareas.length; i++) {
    textareas[i].addEventListener("keypress", colors);
  }

  function colors() {
    if (this.value.indexOf("World") > -1) {
      this.value = this.value.toUpperCase();
      this.style.color = "red";
    }
  }
</script>

更改textarea中唯一单词的样式/颜色？不是DIV

2 个答案: