insertTextAtCursor()函数使得contenteditable失去焦点

时间:2012-05-31 21:45:46

标签: javascript jquery

我需要修复此问题...因为这非常烦人,因为事实是每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>

1 个答案:

答案 0 :(得分:0)

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

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);
    });

});