Question

我想做键盘快捷键。例如，单击ctrl + b后，我得到了[b] [/ b]。我还想拥有一个属性，当我用鼠标选择文本并单击ctrl + b时，我得到了[b]文本[/ 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]

Live

Answer 1

执行textarea.keydown而不是textarea.mouseup。这样，您可以将鼠标放下并按ctrl + b。我还对代码进行了一些更改，而无需在函数内使用按键来提高效率。

$('#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>

添加键盘快捷键

1 个答案: