Как установить подчеркивание оформления текста при наведении на каждое слово текстовой области

Это немного сложно, и вам нужно использовать JavaScript, чтобы выполнить то, что вы хотите.

Я предлагаю использовать как Jquery, так и Надпись.js.

Вам также необходимо использовать элемент contenteditable вместо текстового поля. К сожалению, элемент contenteditable нельзя использовать внутри формы. Итак, перед отправкой формы вам нужно будет прочитать значение элемента contenteditable, удалить теги HTML и установить значение скрытой текстовой области в это чистое значение.

Ниже вы можете найти рабочий код HTML, CSS и JS.

HTML:

<div id = "my-content" contenteditable = "true"></div>
<form action = "some-page.php" onsubmit = "return getContent()">
    <textarea id = "my-textarea" style = "display:none"></textarea>
    <input type = "submit" />
</form>
<span id = "popup_button">click me!</span>

CSS:

#my-content {
  border: 1px solid #ccc;
  min-width: 300px;
  min-height: 100px;
  padding: 10px;
}

#my-content:hover span {
  text-decoration: underline;
}


#my-content.clicked:hover span {
  text-decoration: none;
}

JS: Сначала импортируйте jQuery и Lettering.js:

• https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

• https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.letting.min.js

  функция getContent () { $("#my-textarea").val($("#my-content").attr("aria-label")); }

      function setEndOfContenteditable(contentEditableElement) {
          var range,selection;
              range = document.createRange();//Create a range (a range is a like the selection but invisible)
              range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
              range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
              selection = window.getSelection();//get the selection object (allows you to change selection)
              selection.removeAllRanges();//remove any selections already made
              selection.addRange(range);//make the range you have just created the visible selection
      }
  
      elem = document.getElementById('my-content');
  
      elem.addEventListener("keypress", function(evt) {
          var _evt = evt;
          setTimeout(function(){
            _evt = _evt || window.event;
            var charCode = _evt.keyCode || _evt.which;
            //if (charCode == 32) {
              $("#my-content").lettering('words');
              setEndOfContenteditable(elem);
            //}
          }, 10, _evt);
      }, false);
  
      $('#popup_button').on("click", function(){
          $('#my-content').css('cursor', 'help' );
          $('#my-content').addClass('clicked');
          $('#my-content span').hover(function() {
            $('#my-content span').css("text-decoration", "none");
            $(this).css("text-decoration", "underline");
          });
      }); 
  

Вот рабочий пример Codepen.

Надеюсь, что это поможет вам.