时间戳

首页 > 解决方案 > jquery在插入文本后立即设置插入焦点

jquery - jquery在插入文本后立即设置插入焦点

问题描述

我有一个文本区域和一些笑脸按钮。当用户将光标放在文本区域中间的某处并单击笑脸按钮时，笑脸 bbcode :) 会根据需要插入。问题是最后一行代码 $('#message').focus(); 将光标放在文本区域的末尾。如何使光标在插入的笑脸 bbcode 之后直接移动？

function smilieClick() 
{
    var $txt = jQuery('#message');
    var caretPos = $txt[0].selectionStart;
    var textAreaTxt = $txt.val();
    var txtToAdd = ':) ';
    $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
    $('#message').focus();
}

标签： jqueryfocuscaret

解决方案

希望我正确理解了您的问题。插入符号将安装在添加的表情符号的末尾。

在逻辑的最后，添加$txt.prop('selectionEnd', caretPos + 2).

如果我误解了你的问题，请告诉我。

注意：添加一些表情，然后将光标移动到中间，然后尝试再次添加表情。

$('button').on('click', function() {
var $txt = jQuery("#message");
    var caretPos = $txt[0].selectionStart;
    var textAreaTxt = $txt.val();
    var txtToAdd = ":)";
    $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
    $txt.focus();
    $txt.prop('selectionEnd', caretPos + 2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="message"></textarea>
<button>:)</button>

推荐阅读