Question

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

到目前为止我有这个

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

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

有人可以告诉我一种方法，用于在输入文本字段的单词的末尾或中间插入光标所在的字母吗？

Answer 1

您好我在this question

中找到了此片段

(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();

之后你只需将字符串视为一个数组并在那里插入值并将其余部分移到右边。

Answer 2

您可以使用插件获取插入位置。有许多，但几乎所有这些都使用browser()方法，此方法自jQuery 1.3以来已被弃用，并已在1.9中删除。让我们使用一个名为jQuery Caret Plugin的最新版本，通过这种方式，我们不必使用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 Plugin。

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

查看此DEMO，了解它是如何运作的。

希望它有用！

js-hotkeys将字母添加到表单中的单词中间

2 个答案: