JS热键在表单中单词的中间添加字母

js-hotkeys adding letter to the middle of a word in a form

本文关键字：中间 添加 单词 表单 JS      更新时间：2023-09-26

我正在设置一个输入西班牙语动词的表格。我希望能够使用 js-hotkeys 插件来创建添加重音字母的快捷方式。

到目前为止我有这个 

    $('#presentTense input').bind('keyup', 'Ctrl+a', function () {
        this.value = this.value + ('á');
    });

这很好，因为他们正在打字，它会在他们键入的内容的末尾添加重音字母。问题是，如果他们想返回并在已经键入的单词中间插入重音字母以修复错误或遗漏，则此方法会将重音字母添加到单词末尾。

谁能告诉我一种用于插入光标所在的字母的方法，无论是在输入文本字段中单词的末尾还是中间？

嗨，

我在这个问题中找到了这个片段

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

这将使您能够像这样找到单词的光标位置：

$('#presentTense input').getCursorPosition();

之后，您只需将字符串视为数组并在那里插入值并将其余部分向右移动。

您可以使用插件来获取插入符号位置。有很多，但几乎所有都使用browser()方法，此方法自 jQuery 1.3 以来已被弃用，并在 1.9 中删除。让我们使用最近一个名为jQuery Caret插件的插件，这样我们就不必使用jquery迁移来减轻browser()方法已被删除的事实。

您还必须将事件处理程序绑定到keydown，而不是keyup才能获得正确的插入符号位置。

$('#presentTense').bind('keydown', 'Ctrl+a', function (event) {
        event.preventDefault();
        var start = $(this).range()["start"];
        var end = $(this).range()["end"];
        var len = this.value.length;
        this.value = [this.value.slice(0,start), 
                      'á',
                      this.value.slice(end,len)].join('');
        $(this).caret(start);
});

#presentTense 是 <input id="presentTense"/> 中的输入 ID。

event.preventDefault();以防止 Ctrl+a 的默认操作，即选择整个文本。

$(this).caret(start);像执行事件处理程序之前一样定位插入符号。

要使此代码正常工作，您需要包含jQuery，js-hotkeys和jQuery Caret插件。

建议的脚本可以在任何插入符号位置插入符号"á"，也可以用符号替换所选文本。

查看此演示以了解其工作原理。

希望有用！

相关文章：