javascript - insertTextAtCursor() 函数使 contenteditable 失去焦点

Question

我需要解决这个问题......因为这很烦人，因为每 1000 毫秒就会发生一次！！！

这是完整的代码：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function insertTextAtCursor() {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode('567') );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}
</script>


<div contenteditable onclick="insertTextAtCursor()">hi</div>


<script>
  setInterval(function() {
$("body").html($("body").html().replace(/567/g,'<b>abcde-fghi</b>'));
  },1000);
</script>

Answer 1

您可以在 div 具有焦点时停止间隔，然后在模糊时再次启动它。我还将通过添加一个 id 并仅替换那些内容来更改间隔函数。另外，我认为更简洁的方法可能是在隐藏元素中进行间隔和替换数据。

http://jsfiddle.net/lucuma/AKtvt/

function insertTextAtCursor() {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode('567') );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
} 

function ReplaceData() {

    $("#contentdata").val($("#content").html().replace(/567/g,'<b>abcde-fghi</b>'));

    }

$(document).ready(function() {
    var ph=setInterval(ReplaceData,1000);


    $('#content').on("blur", function() {
       $('#content').html($('#contentdata').val());
        ph=setInterval(ReplaceData,1000);
    });

});

​ ​</p>