onclick事件

Question

我試圖按照this answer，但不是使用像他那樣，在他的jsfiddle一個按鈕，我試圖使用列表項：

http://jsfiddle.net/hqvDT/108/

它看起來像它應該可以工作，但是當我嘗試選擇一些文本，然後按B（對於粗體）時，它實際上並不會粗體顯示文本。

怎麼了？

HTML：

<div id="myarea" contenteditable="true"></div> 

<ul> 
    <li onclick="MakeBold();">B</li> 
    <li><i>I</i></li> 
</ul> 

CSS：

#myarea { 
    border:1px solid #000; 
    padding:5px; 
    height:150px; 
    width:400px; 
    overflow:scroll; 
} 

ul { 
    list-style: none; 
} 

ul li { 
    width: 35px; 
    height: 35px; 
    border: 1px solid #ccc; 
    text-align: center; 
    line-height: 32px; 
    font-size: 14px; 
    color: #999; 
    cursor: pointer; 
    display: inline-block; 
    margin-right: -5px; 
    font-weight: bold; 
    font-size: 18px; 
} 

ul li:hover { 
    color: black; 
} 

JS：

function MakeBold() { 
    document.execCommand('bold', null, false); 
} 

Answer 1

的問題是，當除了一個按鈕以外的元素被點擊時，在文本區域的選擇消失。

在解決此問題的方法中，使用onmousedown而不是onclick，因爲在文本選擇丟失之前觸發mousedown事件。

<li onmousedown="MakeBold()">B</li> 

Answer 2

單擊按鈕不會取消選擇文本選擇。點擊時的其他元素將取消選擇文本。由於文本在點擊之前被取消選擇，所以文本不會變爲粗體。每次選擇文本時，您都需要使用按鈕或記住選定的文本，並處理保存的選擇。我真的會建議堅持一個按鈕。