时间戳

首页 > 解决方案 > JQuery 按钮单击导致可编辑 div 中突出显示的文本失去焦点

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

问题描述

我有一个可编辑的 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);
});

标签： javascriptjqueryhtml

解决方案

你可以使用<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>

您可以阅读为什么在单击按钮时从 textarea 获取文本选择有效，但在单击“div”时无效（在 Internet Explorer 中）

推荐阅读