jQuery：从虚拟键盘添加字母到输入框中的插入位置

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

然而，这也有一些缺点太多，比如无法取代强调字符 - 而不是特殊字符似乎就在旁边;或者点击后插入符总是跳到输入框的最后位置。

我想知道是否有办法，至少，防止脱字符后，从点击事件创建一封信后跳转到最后的位置？

来源

2015-05-04 vagaryblue

你是说，你希望能够选择多个角色，并通过点击该按钮用特殊字符替换它们？ – IronFlare

您可以尝试重新运行您在使用mouseup进行单击之前运行的子字符串方法，然后将长度加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

来源

2015-05-05 00:00:06 IronFlare

为了保持插入符号中的位置新增字符后，您可以在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

来源

2015-05-05 00:20:37

jQuery：从虚拟键盘添加字母到输入框中的插入位置

回答

相关问题