时间戳

首页 > 解决方案 > 修改 JQuery 函数以在单击时运行

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

问题描述

我一直在努力修改此功能，使其在单击具有“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>

非常感谢你的帮助！！

标签： javascriptjquery

解决方案

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

除了this在代码中定位（this现在指的是单击的按钮，而不是 textarea），您可以使用$("textarea"). 要访问 vanilla 属性，您可以使用$("textarea")[0]which 将允许您使用.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>

推荐阅读