Javascript jQuery：将虚拟键盘中的字母添加到输入框中的插入符号位置

我正在学习jquery并为输入文本框创建一个虚拟键盘（用于输入特殊字符）。我设法在用户单击的插入符号位置将字母单击事件添加到输入中

$('#keyboard #e_specchar').click(function(){
   var $this = $(this);
   var caret = document.getElementById('input').selectionStart; 
   var character = $this.html(); 
   var textAreaStr = $('#input').val();
   $("#input").val(textAreaStr.substring(0, caret) + character + textAreaStr.substring(caret) );
});

然而，这也有一些缺点，例如无法替换突出显示的字符-相反，特殊字符会出现在它旁边；或者，插入符号总是在单击后跳到输入框的最后一个位置

---

我想知道是否有一种方法至少可以防止插入符号在通过单击事件创建字母后跳转到最后一个位置？

以下代码允许您选择多个字符并通过单击按钮替换所有字符。此外，它会将光标直接放在插入特殊字符的点之后

注意：我将

$this=$（this）

替换为只使用

$（this.html（）textarestr

变量赋值中的code>，只是因为它缩短了代码，而不是因为您的方法不正确

$('#e_specchar').click(function(){
    var selStart = $("#input")[0].selectionStart;
    var selEnd = $("#input")[0].selectionEnd;
    var character = $(this).html(); 
    var textAreaStr = $('#input').val();
    var value = textAreaStr.substring(0, selStart) + character + textAreaStr.substring(selEnd);
    $("#input").val(value).focus();
    $("#input")[0].selectionStart = selStart+1, $("#input")[0].selectionEnd = selStart+1;
});

---

要将插入符号保持在新添加字符后的位置，可以使用中的代码

要替换所选字符，还应检查selectionEnd并比较它是否与输入的selectionStart不同。如果是，请更改代码，使最后一个子字符串从selectionEnd开始，而不是从selectionStart开始。例如：

$('.btn').click(function(){
   var $this = $(this);
   var caret = document.getElementById('input').selectionStart;
   var caretEnd = document.getElementById('input').selectionEnd;
   var character = $this.val(); 
   var textAreaStr = $('#input').val();
   $("#input").val(textAreaStr.substring(0, caret) + character + textAreaStr.substring(caretEnd) );
    setCaretPosition('input', caret+1);
});

---

您是说您希望能够通过单击按钮选择多个字符并用特殊字符替换它们吗？您可以尝试使用鼠标右键重新运行单击之前运行的子字符串方法，然后将+1添加到长度。