在execCommand後返回焦點到contenteditable？

我有以下代碼演示contenteditable屬性和一個按鈕，將帶有contenteditable區域的段落插入到粗體文本。我的問題是如何將焦點返回到我點擊粗體後停止的位置，如果突出顯示某些文本，然後單擊粗體，則會將這些文本加粗，但焦點將不再存在。如果您不選擇任何內容並單擊粗體，同樣的事情會發生，重點將消失，如果您再次點擊從哪裏離開，則可以鍵入粗體文本。在execCommand後返回焦點到contenteditable？

非常感謝您的幫助！

<head> 
    <style type="text/css"> 
    #container{ 
     width:500; 
    } 
    .handle{ 
     float:left; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     $('#bold').click(function(){ 
      document.execCommand('bold', false, true); 
     }); 
    }); 
    </script> 
</head> 
<button id="bold">Bold</button> 
<div id="container"> 
<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 

<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 
</div>

來源

2009-08-22 FurtiveFelon

您可能要到最後單擊項目存儲在一個變量，然後調用.focus（）它的.execCommand執行之後。這樣的事情，我想：

$(function(){ 
     $('p.editable').click(function() { 
      var clickedItem = $(this); 
      clickedItem.attr('contenteditable', true).focus(); 
      $('#bold').click(function(){ 
        document.execCommand('bold', false, true); 
        clickedItem.focus(); 
      }); 
     }); 
    });

這種方式，您也可以刪除標記的"contenteditable"屬性...

HTH

來源

2009-09-11 11:55:14 ALFABreezE

這會在每次單擊段落時將操作綁定到'＃bold'的單擊事件，從而導致多次綁定處理程序。你不想那樣。 – Jake 2010-06-30 04:11:42

增加了'.editable'類，所以它只綁定到標記中指定的那個類。 – ALFABreezE 2011-09-06 14:50:23

每次你點擊一個pedable時，一個處理器將被綁定#bold。當你點擊#bold時，所有這些將被觸發，導致execCommand被多次運行，並且聚焦跳過所有已被點擊的pedables。 devongovett給出的答案不會遇到這個問題，因爲#bold處理程序只綁定一次。 – Jake 2011-09-11 21:57:50

HTML：

<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript：

function doRichEditCommand(aName, aArg){ 
    getIFrameDocument('editorWindow').execCommand(aName,false, aArg); 
    document.getElementById('editorWindow').contentWindow.focus() 
}

參考這可能會幫助您：

https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

來源

2009-09-16 14:55:00

你可以使用jQuery的.focus（）函數來關注它。這應該工作：

var current; 
$(function(){ 
    $("p[contenteditable]").focus(function() { 
     current = this; 
    }); 

    $('#bold').click(function(){ 
      document.execCommand('bold', false, true); 
      $(current).focus(); 
    }); 
});

這只是讓每次被用戶關注時間的當前編輯的字段的軌道，並單擊加粗按鈕時，焦點將重新設置該字段。

來源

2009-11-27 00:37:28 devongovett

您應該使用.contents（）

var current; 
$(function(){ 
    $("p[contenteditable]").focus(function() { 
     current = this; 
    }); 

    $('#bold').click(function(){ 
      document.execCommand('bold', false, true); 
      $(current).contents().focus(); 
    }); 
});

來源

2010-07-22 02:56:35 fukid

謝謝，這有助於！ – 2010-08-28 15:49:16

.contents（）調用的原因是什麼？ – xec 2012-04-23 14:37:56

不知道爲什麼'.contents（）'是必需的，但它可以正常工作，而直接調用'.focus（）'不會。福基，你能解釋一下嗎？ – FeifanZ 2013-12-28 15:34:06

如果你在一個iframe的時候，調用焦點（）的默認視圖。

myiframedocument.execCommand('Bold',false,null); 
myiframedocument.defaultView.focus();

來源

2012-01-18 00:29:08

在execCommand後返回焦點到contenteditable？

回答

相關問題