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

Posted 2023-03-06

【中文标题】更新其中的 html 时光标跳转到代码标记的开头

【英文标题】：Cursor jumps to the start of code tag when updating html in it

【发布时间】：2016-01-19 03:53:42

【问题描述】：

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

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>

如何解决这个问题？

感谢您的时间和帮助。

更新

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

【问题讨论】：

http://***.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser/4238971#4238971

【参考方案1】：

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

希望这会有所帮助。

【参考方案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>