Question

我一直在努力修改此功能，以使其在单击带有“ boldbutton”类的按钮时运行。每当我修改它时，功能都会改变。我真的好像这个函数需要以jQuery（'textarea'）开始。

我将如何修改此功能以使其

a）保留其功能，并且

b）仅在单击$（'。boldbutton'）

时运行

<script>

jQuery('textarea').on('keydown', function(e) {

    e.preventDefault();

    var text = jQuery(this).val();

    var start = this.selectionStart;

    var end = this.selectionEnd;

    var selection = '<b>' + text.substring(start, end) + '</b>';

    text = text.substring(0, start) + selection + text.substring(end);

    jQuery(this).val(text);

    this.selectionStart = start;

    this.selectionEnd = start + selection.length;

});

</script>

非常感谢您的帮助！

Answer 1

如下更新您的代码。将jQuery('textarea').on('keydown', function(e) {更新为jQuery('.boldbutton').on('click', function(e) {。将jQuery(this)更改为jQuery('textarea')。添加var textArea = jQuery('textarea')[0];并使用textArea代替this。

<script>

    jQuery('.boldbutton').on('click', function(e) {

        e.preventDefault();

        var text = jQuery('textarea').val();
        var textArea = jQuery('textarea')[0];

        var start = textArea.selectionStart;

        var end = textArea.selectionEnd;

        var selection = '<b>' + text.substring(start, end) + '</b>';

        text = text.substring(0, start) + selection + text.substring(end);

        jQuery(textArea).val(text);

        textArea.selectionStart = start;

        textArea.selectionEnd = start + selection.length;

    });

</script>

Answer 2

您可以使用.click()方法将点击事件侦听器添加到您的按钮。

您可以使用this来定位textarea元素，而不是在代码中定位this（因为$("textarea")现在是指单击的按钮，而不是textarea）。要访问原始属性，可以使用$("textarea")[0]，这将允许您使用.selectionStart和selectionEnd。

请参见下面的工作示例：

$('.boldbutton').click(function() {
  var $textarea = $("textarea");
  var text = $textarea.val();
  var start = $textarea[0].selectionStart;
  var end = $textarea[0].selectionEnd;
  
  var selection = '<b>' + text.substring(start, end) + '</b>';
  text = text.substring(0, start) + selection + text.substring(end);
  
  $textarea.val(text);
  $textarea.selectionStart = start;
  $textarea.selectionEnd = start + selection.length;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
<br />
<button class="boldbutton">Bold</button>

Answer 3

尝试将整个JS代码包装在内部

$(document).ready(()=> {

})```

修改JQuery函数以在单击时运行

3 个答案: