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

【问题标题】：jQuery: Add letter from virtual keyboard to the caret position in the input boxjQuery：将虚拟键盘中的字母添加到输入框中的插入符号位置
【发布时间】：2015-07-14 12:36:34
【问题描述】：

我正在学习 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) );
});

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

我想知道是否有办法，至少，防止插入符号在从点击事件创建一个字母后跳到最后一个位置？

【问题讨论】：

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

标签： javascript jquery html

【解决方案1】：

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

注意：我将$this = $(this) 替换为仅在textAreaStr 变量赋值中使用$(this).html(); 只是因为它缩短了代码，而不是因为您的方法不正确。

$('#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;
});

DEMO

【讨论】：

【解决方案2】：

要将插入符号保持在新添加的字符之后的位置，可以使用the accepted answer on this question中的代码。

要替换选定的字符，您还应该检查 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);
});

JSFiddle Demo

【讨论】：