onclick事件

2013-12-21 589 views 1 likes

我试图按照this answer，但不是使用像他那样，在他的jsfiddle一个按钮，我试图使用列表项：onclick事件

它看起来像它应该可以工作，但是当我尝试选择一些文本，然后按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); 
}

来源

2013-12-21 Bagwell

回答

的问题是，当除了一个按钮以外的元素被点击时，在文本区域的选择消失。

在解决此问题的方法中，使用onmousedown而不是onclick，因为在文本选择丢失之前触发mousedown事件。

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

来源

2013-12-21 22:46:12

这可行，但问题在于突出显示的文本不会保持突出显示。我想我只需要使用一个按钮并相应地设置它。 – Bagwell

您也可以使用一些Javascript来保存选择并在未选中时重新选择文本，但我认为按钮的样式是您想要的更简单的路线。 –

单击按钮不会取消选择文本选择。点击时的其他元素将取消选择文本。由于文本在点击之前被取消选择，所以文本不会变为粗体。每次选择文本时，您都需要使用按钮或记住选定的文本，并处理保存的选择。我真的会建议坚持一个按钮。

来源

2013-12-21 22:47:30

onclick事件

回答

相关问题