Question

我试图在文本框内的选择之前和之后插入一个值（单击按钮）。

<script type="text/javascript">
    $(document).ready(function(){

         $('.boldbutton').on('click', function(){

            var body = $("#id_body").val();
            var start = body.selectionStart;
            var end = body.selectionEnd;
            var selection = '<' + body.substring(start, end) + '>';

            text = body.substring(0, start) + selection + body.substring(end);
            $("#id_body").val(text);

         });  

    });

</script>

如果我选择“ a”并单击加粗按钮，则文本框中将显示以下内容：

a<a>a

应该出现的是

<a>

对为什么会发生这种情况有任何想法吗？

谢谢！

Answer 1

尝试以下操作：

$('.boldbutton').on('click', function(){

 var body = $("#id_body");
 var len = body.value.length;
 var start = body.selectionStart;
 var end = body.selectionEnd;
 var selection = body.value.substring(start, end);

 var replace = '<' + selection + '>';

 body.value =  body.value.substring(0,start) + replace + body.value.substring(end,len);

});

Answer 2

问题可能是在单击按钮时文本字段失去了焦点，因此选择了空白文本。您可以做的一件事是保留对选定文本的引用，使之之前实际上失去焦点（使用.blur()），然后在按钮单击处理程序上使用此数据，而不是从选择的当前状态，再次为空。

$('#id_body').blur(function(e) {
  $(this).data('selection', {
    start: this.selectionStart,
    end: this.selectionEnd
  });
})

$('.boldbutton').click(function() {
  var $body = $('#id_body');
  var sel = $body.data('selection');
  var text = $body.val();
  var start = sel.start;
  var end = sel.end;
  var selection = '<' + text.substring(start, end) + '>';

  if (end) {
    text = text.substring(0, start) + selection + text.substring(end);

    $body.val(text);

    $body[0].selectionStart = start;
    $body[0].selectionEnd = start + selection.length;
  }

  $body.focus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="id_body" rows="4">Select some text</textarea>
<button class="boldbutton">Bold me</button>

在文本框中进行选择之前和之后插入字符

2 个答案: