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 只是一个按钮或提交按钮。