如何将鼠标悬停在文本区域的每个单词上来设置文本装饰下划线

Question

I have to make a underline on each word in textarea when user hover over it after on click function on a button how can i do it?

 $('#popup_button').on("click", function(){ $('#my-content').css('cursor', 'help' ); $('#my-content span').hover(function() { $('#my-content span').css("text-decoration", "underline"); }); }); 

Answer 1

It's a bit tricky and you need to use JavaScript to accomplish what you want.

I suggest using both Jquery and Lettering.js

You need also to use a contenteditable element instetad of a textarea. Unfortunately a contenteditable element cannot be used inside a form. So, before submitting your form you will have to read the value of the contenteditable element, strip HTML tags and set the value of a hidden textarea to that clean value.

Following you can find HTML, CSS and JS working code.

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: First import both jQuery and 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.lettering.min.js

  function 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"); }); }); 

Here a working Codepen example.

Hope this will help you.