Question

在打字时，是否有一种巧妙的方式在文本区域突出显示文本？

我基本上输入：

This is a [[note]] to do on friday.

在textarea上，然后，使用a highlighting library，我会这样称呼它：

    function FindAllNotes() {
        var note = /^(?:\[{2}(?!\[+))(.+)(?:\]{2}(?!\[+))$/g
        , input = ($(#textarea).val()).match(note);
           $(#textarea).highlightWithinTextarea({
            highlight: [input],
            className: 'yellow'
          });

    }
    $(#textarea).on('keyup', function () {
        FindAllNotes();
    });

但问题是，每次我输入时，它都会起作用并突出显示[[]]中的注释，然后我将光标/焦点丢失在textarea上。

Answer 1

您链接到的插件可以按照您的意愿处理正则表达式（虽然您应该从中删除^和$，但不要尝试匹配整个字符串）。

＆＃13;

$(function(){
  $('.example').highlightWithinTextarea({
    highlight: /(?:\[{2}(?!\[+))(.+)(?:\]{2}(?!\[+))/g,
    className: 'highlight'
  });
});

＆＃13;

.example{
  width:500px;
  height:250px;
}

.highlight{
  background-color:tomato;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.js"></script>
<link rel="stylesheet" href="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.css">

<textarea class="example">This is a [[note]] to do on friday.</textarea>

＆＃13;

请记住，您需要包含插件中的css文件，该文件将textarea与div文本

包装/对齐

Answer 2

您可以使用$("#textarea").focus();手动设置文本框的焦点。也许可以尝试在突出显示功能之后调用此功能，如下所示：

$(#textarea).on('keyup', function () {
    FindAllNotes();
    $("#textarea").focus();
});

文本解析然后在javascript中在textarea中突出显示

2 个答案: