CODEWITHSUNDEEP
javascripthtmlcolorstextarea
Epistomai
Epistomai

Reputation: 475

Change style/color of a only word in textarea? NOT DIV

This may be absurd. But I was following step by step some tutorial codes to change color the textarea box while I was texting, and works fine (changes the text to uppercase and red while writing), but I want only one word to change. In another question, they use div tag elements, but I want to use textarea tag element. Can anyone point me in the right direction?

So, this is the code:

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>

Upvotes: 0

Views: 3777

Answers (2)

guest271314
guest271314

Reputation: 1

You can create a <textarea> element for each word, use if condition withing colors function to set color at style attribute for that specific <textarea> element .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>

Upvotes: -1

waterfoul
waterfoul

Reputation: 313

You really can't do this with a textarea. Fortunately you can use a div to emulate a textarea so you can still edit within it by adding contenteditable="true" to the tag

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

Upvotes: 1

Related Questions