更改textarea中唯一單詞的樣式/顏色？ NOT DIV

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來模擬一個文本區域，讓您可以在其中編輯加入contenteditable="true"到標籤

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

Answer 2

可以爲每個單詞創建一個<textarea>元素，使用if條件withing colors功能設置color在style屬性爲具體<textarea>元素.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>