我正在尝试关注 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);
}
最佳答案
问题是当单击按钮以外的元素时,textarea 中的选择会消失。
解决此问题的方法是使用 onmousedown
而不是 onclick
,因为 mousedown
事件在文本选择丢失之前触发。
<li onmousedown="MakeBold()">B</li>
关于javascript - 列表项上的 onclick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20724265/