在contentEditable元素中居中占位符插入符号
Centering the placeholder caret in contentEditable element
我有以下内容:http://jsfiddle.net/mb76koj3/.
[contentEditable=true]:empty::before{
content:attr(data-ph);
color: #CCC;
text-align: center;
}
h1 {
text-align: center;
}
<h1 contenteditable="true" data-ph="Name"></h1>
问题是<h1>
居中,但占位符插入符号不居中(直到您开始键入)。插入符号在左侧,如何更改?
这不是一个理想的解决方案,但我们可以通过将50%
的padding-left
应用于:empty
元素以使光标出现在中间来伪造效果。
然后使用绝对定位和translateX
变换函数的负值将占位符(伪元素)对齐在中间。
* {
margin: 0;
padding: 0;
}
@-moz-document url-prefix() { /* CSS Hack to fix the position of cursor on FF */
[contentEditable=true]:empty {
padding-top: 1em;
padding-bottom: .25em;
-moz-box-sizing: content-box;
}
}
[contentEditable=true]:empty {
padding-left: 50%;
text-align: left; /* Fix the issue on IE */
}
[contentEditable=true]:empty::before{
content:attr(data-ph);
color: #CCC;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
h1 {
text-align: center;
position: relative;
}
<h1 contenteditable="true" data-ph="Name"></h1>
从OP提供的代码中可以看出,剩下的唯一问题是,在Firefox上,一个空的<br>
元素被附加到contentEditable
元素上,这导致:empty
伪类不再与该元素匹配。因此占位符不会被恢复。
然而,由于问题是关于光标的位置,我认为这种行为对OP来说很好。
看了Hashem Qolami的回答后,我想到了这个:
[contentEditable=true]:empty {
padding-left: 50%;
}
[contentEditable=true]:empty::before{
content:attr(data-ph);
color: #CCC;
text-align: center;
margin-left: -100%;
}
h1 {
text-align: center;
}
<h1 contenteditable="true" data-ph="Name"></h1>
然而,adamdc78发现了两个问题:
- 在IE11中,光标出现在占位符之后
- 在Firefox中,占位符在键入并清空后不会恢复
这个时候,我不知道该怎么解决。
相关文章:
- 使用javascript的Asp.net内容占位符
- Internet Explorer缺少占位符支持,特别是密码字段
- 如何隐藏按钮单击事件上的占位符
- 需要URL模板占位符查找和替换功能的输入
- 换行符插入jquery选择器
- 初始化ng模型时,Angular ui选择占位符不起作用
- 如何在ie7或更高版本中设置密码字段的占位符
- 在不使用javascript的情况下,可以在表单字段中设置文本占位符(以提示最终用户插入特定格式)
- Select2-使用自定义模板时不显示占位符
- 替换字符串中的占位符值
- 为什么我应该使用HTML5(上下文:占位符)
- 在contentEditable元素中居中占位符插入符号
- 从气球弹出窗口中删除占位符
- 选择“选项”时更改输入的占位符
- 错误:ReCAPTCHA占位符元素必须为空
- 如何更改文本区域的颜色's文本,具体取决于它是否为占位符
- 得到一个没有属性的错误“;占位符”;在xhtml strict 1.0中
- 使用Node/Javascript提取字符串中的所有占位符
- 如何在Summernote中插入占位符元素
- 当文本对齐居中时,插入符号出现在占位符onfocus的末尾