我有一个具有属性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 bug,或者这是我可以解决的问题,以及如何解决?
答案 0 :(得分:2)
我能够通过向表单控件添加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>
你可以在这里看到小提琴:http://jsfiddle.net/y3ms3f7a/5/