jQuery按钮单击导致可编辑div中突出显示的文本失去焦点

Question

我有一个可编辑的div，我正在尝试使用按钮/锚点触发JQuery动作来格式化文本。问题是，如果我在可编辑的div中有选定的文本，然后单击#bold按钮使其变为粗体。文本失去焦点，什么也没发生。

HTML

<div class="poster">
    <div class="editor" contenteditable="true" placeholder="What's on your mind?"></div>

    <div class="posterButtons preventCollapse">
        <div class="pull-left">
            <a id="bold">B</a>
            <a id="italic">I</a>
            <a id="underline">U</a>
        </div>
        <div class="pull-right">
            <a class="submitPost">Post</a>
        </div>
    </div>
</div>

jQuery

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

Answer 1

您可以使用<button>代替<a>

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

.editor {

    height: 100px;
    border: 1px solid #ddd;
    padding: 10px;
    outline: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="poster">
    <div class="editor" contenteditable="true" placeholder="What's on your mind?"></div>

    <div class="posterButtons preventCollapse">
        <div class="pull-left">
            <button type="button" id="bold">B</button>
            <button type="button" id="italic">I</button>
            <button type="button" id="underline">U</button>
        </div>
        <div class="pull-right">
            <a class="submitPost">Post</a>
        </div>
    </div>
</div>

您可以阅读Why getting a text selection from textarea works when a button clicked but not when a "div" clicked (in Internet Explorer)

Answer 2

请使用<button type="button" id="bold">B</button>代替<a id="bold">B</a>。仅在需要重定向或类似操作时才使用<a>标签。

此外，如果您使用按钮作为提交按钮，请尝试使用<button type="submit" id="bold">B</button>。区别在于button type只是一个按钮或一个提交按钮。