텍스트 영역의 유일한 단어의 스타일/색상을 변경합니까? 아니 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

:

그래서,이 코드입니다. 다행히 당신은

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

Answer 2

당신은 각 단어에 대한 <textarea> 요소를 만들 수 있습니다 태그에 contenteditable="true"를 추가하여 여전히 내에서 편집 할 수 있도록 텍스트 영역을 에뮬레이션 사업부를 사용 설정 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>