Contenteditable div 光标在 div 之外

Question

我有一个具有 contenteditable="true" 属性的 div 它可以工作，但是 chrome (Ubuntu 14.04) 将光标放在 div 之外如图所示：

为什么要这样做？我正在使用这个 html（聪明）：

<div class="col-sm-6">
    <div class="form-control" contenteditable="true" id="tags">
        <div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
        <div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
    </div>
</div>

我正在使用这个 css:

.tag{
    background-color: #01b6ef;
    color: #012935;
    display: inline-block;
    padding: 1px 5px;
    margin-right: 3px;
}

.tag a{
    color: #ffffff;
    margin-left: 5px;
    font-size: 12px;
}
.tag a:hover{
    color: #ffffff;
}

这是 chrome 错误，还是我可以修复，如何修复？

http://jsfiddle.net/y3ms3f7a/1/

Answer 1

我可以通过向表单控件添加 input-group 来解决问题，如下所示：

<div class="col-sm-6">
    <div class="form-control" contenteditable="true" id="tags">
        <div class="input-group">
            <div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
            <div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
        </div>
    </div>
</div>

您可以在此处查看 fiddle：http://jsfiddle.net/y3ms3f7a/5/

Contenteditable div 光标在 div 之外

Contenteditable div cursor outside of div

html

css

contenteditable