Question

当用户单击按钮上的单击功能后将鼠标悬停在文本区域上的每个单词上时，我必须在其上划下划线？

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

Answer 1

这有点棘手，您需要使用JavaScript来完成所需的操作。

我建议同时使用Jquery和Lettering.js

您还需要使用textarea中的一个contenteditable元素。不幸的是，不能在表单内部使用contenteditable元素。因此，在提交表单之前，您将必须阅读contenteditable元素的值，剥离HTML标签并将隐藏的textarea的值设置为该干净值。

接下来，您可以找到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.lettering.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");
        });
    });

Here a working Codepen example.

希望这会对您有所帮助。

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

1 个答案: