时间戳

首页 > 解决方案 > 添加键盘快捷键

javascript - 添加键盘快捷键

问题描述

我想做键盘快捷键。例如，点击 ctrl + b 后，我得到了 [b] [/ b]。我也想有这样一个属性，当我用鼠标选择文本并单击 ctrl + b 时，我得到 [b] text [/ b]。我的代码目前如下所示：

html

    <textarea id="textarea" rows="4" cols="50">
lorem lorem lorem lorem 
    </textarea>

jQuery

var  textarea = $('#textarea');
textarea.mouseup(function (event) {
        event.preventDefault();
        var content = textarea.val(),
            selectText = window.getSelection().toString(),
            cursorPosition = textarea.prop('selectionStart'),
            content = textarea.val(),
            textBefore = content.substring(0, cursorPosition),
            textAfter = content.substring(cursorPosition, content.length);

        if(selectText.length > 0) {
            textarea.keyup(function (event) {
                if (event.ctrlKey && event.which == 66) {
                    textarea.val(content.replace(selectText, '[b]' + selectText + '[/b]'));
                    textarea[0].setSelectionRange(textBefore.length + selectText.length + 7, textBefore.length + selectText.length + 7);
                } });
        } else {
            textarea.keyup(function (event) {
                if (event.ctrlKey && event.which == 66) {
                    textarea.val(textBefore + '[b][/b]' + textAfter)
                    textarea[0].setSelectionRange(textBefore.length + 7, textBefore.length + 7);
                } 
            });
        }
    });

问题是我不能把它分成事件。因为有时我想选择文本，有时我只想添加一个标签。此时，我的代码可以正常工作，因此我必须始终在字段上单击鼠标然后添加标记。而且我不能并排添加一些标记。

总结一下我的任务是在字段中点击 ctrl + b 后会出现[b] [/ b]，或者选择文本后点击 ctrl + b 会得到[b] text [/ b]

居住

标签： javascriptjqueryhtml

解决方案

代替 textarea.mouseup，执行 textarea.keydown。这样您就可以放下鼠标并按ctrl + b。我还稍微更改了代码，没有在函数内部使用 keypress 并使其更高效。

$('#textarea').keydown(function(e) {
  if (e.ctrlKey && e.key == 'b') {
    var length = $(this).val().length;
    var start = this.selectionStart;
    var end = this.selectionEnd;
    var selectedText = $(this).val().substring(start, end);
    var replacement = "[b]" + selectedText + "[/b]";
    $(this).val($(this).val().substring(0, start) + replacement + $(this).val().substring(end, length));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textarea" rows="4" cols="50">ducks</textarea>

推荐阅读