Question

当我输入我的代码标签并使用下面的脚本更新上下文时，它会继续将光标移动到代码框的开头。我该如何解决？

function HastTagLocation(Controll) {
  var controller = $('.' + Controll);
  controller.keyup(function() {

    // Get the code element.
    var e = $(this);
    // Get the text content.
    var text = e.text();
    // Replace the matches and wrap them with span tag.
    var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
    // Set the html of the original element.
    e.html(text);

  });

};

$(document).ready(function() {
  HastTagLocation('form-control');
});

.hash {
  background-color: #808080;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>

如何解决这个问题？

感谢您的时间和帮助。

更新

解决方案不是让光标跳转到文本的末尾，而是让光标跳回到我最后写的东西

Answer 1

我认为一个解决方案是使用两个不同的元素，一个是您实际编写代码，使用透明颜色，或另一种隐藏其内容的方式，另一个是实际显示您想要显示的内容。< / p>

希望这有帮助。

Answer 2

要使其正常工作，您可以使用input事件而不是keyup（这样，即使按住键，它也会在每次输入后触发）。然后使用Selection和Range对象相应地更改插入位置。例如，Range具有setStart和setEnd方法，可让您将carret移动到特定位置。

要获得这些对象的更高精度，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Range和https://developer.mozilla.org/en-US/docs/Web/API/Selection（请注意，这些对象上的某些功能仍在实验中）

以下是使用代码的快速示例。请注意，这不是完全可操作的，为了使其正常工作，当感叹号生成元素时，您必须相应地进行调整以使插入符号处于正确的位置。您还可能需要处理特定键输入（如 Suppr 或 Backspace ）与额外元素的交互。

function HastTagLocation(Controll) {
    var controller = $('.' + Controll);
    controller.on('input', function (evt) {
        // Storing the caret state
        var sel, range, start, end ;
        sel = window.getSelection();
        range = sel.getRangeAt(0);
        start = range.startOffset;
        end =  range.endOffset;

        // Get the code element.
        var e = $(this); 
        // Get the text content.
        
        var text = e.text();
        // Replace the matches and wrap them with span tag.
        var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
        // Set the html of the original element.
        e.html(text);

        // restoring the caret
        range.setStart(this.childNodes[0], start);
        range.setEnd(this.childNodes[0], end);

    });

};

$(document).ready(function () {
        HastTagLocation('form-control');

    });

.hash {
    background-color:#808080;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>

更新其中的html时，光标跳转到代码标记的开头

2 个答案: