爲什麼我不能通過點擊DIV來加粗文本？

有人可以解釋爲什麼點擊一個按鈕會觸發瀏覽器編輯在contentEditable div但點擊一個調用相同的execCommand沒有？在http://jsfiddle.net/GgX8G/3/我有一個按鈕和一個div觸發同樣的代碼，但只有按鈕執行大膽的行動：爲什麼我不能通過點擊DIV來加粗文本？

<div id="boldB">B</div> 
<button id="bld">B</button> 

$(document).ready(function(){ 
    $('#boldB').click(function() { 
      document.execCommand('bold', false, null); 
      alert("clicked the B div"); 
     }); 

    $('#bld').click(function() { 
      document.execCommand('bold', false, null); 
      alert("clicked the B button"); 
     }); 
});

感謝

來源

2013-05-17 Steve

它在我看來像一個焦點問題。您會注意到，當您單擊div時，contenteditable中突出顯示的文本會失去焦點，而不會出現在按鈕單擊上。如果首先使用div作爲按鈕，您可能需要將突出顯示的範圍存儲在模糊處。我可以問你爲什麼需要使用div，當你可以輕鬆地按下你想要的按鈕樣式嗎？ – TommyBs

你需要這個嗎？ http://jsfiddle.net/GgX8G/4/ – ant

你的意思是？ http://jsfiddle.net/GgX8G/8/ –

當你點擊一個div，當前選擇div失去了重點，所以execCommand函數沒有任何功能。您需要提前趕上事件（例如，在鼠標向下），並阻止它。例如這裏：http://jsfiddle.net/GgX8G/13/

逐行解釋：

$('#boldB').mousedown(function(e) {

MouseDown事件被稱爲click事件之前，之前的焦點的變化，使我們有機會以防止其發生變化。

e.preventDefault();

調用事件對象上preventDefault將防止從發生的歷史隨後的默認動作，即聚焦的改變。

document.execCommand('bold', false, null);

已經這樣做了，你可以在你的div安全execCommand，因爲它仍是重點，選擇是否完好。

來源

2013-05-17 14:42:45 Greg

我不知道你是誰或者你爲什麼被低估，但這是正確的。 – j08691

JSFiddle第一次沒有保存我的代碼編輯，所以這個例子沒有奏效。我幸運地注意到了。 – Greg

謝謝。這解釋了它。有沒有辦法看到傳遞給瀏覽器的選擇，所以我會在這種情況下看到null？ – Steve

-4

這裏，嘗試的jQuery希望此http://jsfiddle.net/GgX8G/7/

行是這樣的：

$("#boldB").css("font-weight", "bold");

來源

2013-05-17 14:41:28

這是如何讓你突出contenteditable區域中的特定單詞而不突出顯示所有文本？ – j08691

目標不是要粗體顯示某些文本。我們的目標是讓自己滿意地工作。我只是用粗體作爲一個不起作用的簡單例子。 – Steve

爲什麼我不能通過點擊DIV來加粗文本？

回答

相關問題