Javascript Jquery:无法将空白添加到contenteditable div的占位符中

对于我的可上下文div，我需要使用javascript在占位符中预先添加一些空格，以便将灵活长度占位符的文本居中

然而，在起搏器文本之前添加多个空格似乎是不可能的

演示如下：

框1
框2
.comment_box[数据占位符]：不（：焦点）：不（[数据分区占位符内容]）：之前{
内容：attr（数据占位符）；
颜色：#aaa；
}
.评论框{
最小高度：80px；
边框：1px实心橙色；
宽度：550px；
文本对齐：左对齐；
}
$（文档）.ready（函数（）{
警报（“我需要使用jquery使box2与box1相同”）；
var a=“”.重复（3）；//我累了var a=“”也不工作
var b=“somewords”；
$（“注释框2”）.attr（“数据占位符”，a+b）；
});

以下是脚本的更新版本：

$(document).ready(function(){
    alert("I need to use jquery to make box2 same as box1");
    var a= $("#comment_box1").attr("data-placeholder"); // I tired var a="    &nbsp" not working also
    var b="somewords";
    $("#comment_box2").attr("data-placeholder",a);

});

---

它从comment_box1获取attr值，将其存储在a中，并将其放置在comment_box2中。如果您正在处理非中断空格（其中5个），则需要使用正确的字符：

<script>
$(document).ready(function(){
    alert("I need to use jquery to make box2 same as box1");
    var a= String.fromCharCode(160).repeat(5);
    var b="somewords";
    $("#comment_box2").attr("data-placeholder",a+b);

});
</script>

---

您应该使用css对齐占位符中的文本，使用伪类作为输入占位符

下面是代码段的一个示例，我向输入中的文本样式添加了一些类，并且在有占位符文本时也添加了输入本身：

。第一次输入{
宽度：100px；
}
.第二次输入{
宽度：300px；
}
.第三项输入{
宽度：500px；
颜色：红色；
}
输入{
字体大小：15px；
填充：10px；
利润率：10px；
}
输入：显示占位符{
边框颜色：红色；
}
：-webkit输入占位符{
文本对齐：居中；
字母间距：3px；
}
：-moz占位符{
文本对齐：居中；
字母间距：3px；
}
：-ms输入占位符{
文本对齐：居中；
字母间距：3px；
}
：-moz占位符{
文本对齐：居中；
字母间距：3px；
}

为什么不通过CSS添加填充？或者文本对齐到中心为什么使用Javascript？文本对齐中心也会使用户输入对齐到中心，我希望用户输入对齐到左侧，而占位符居中“文本对齐中心也会使用户输入对齐到中心"–仅当您将其应用于用户输入时。您正在为占位符使用

：before

伪元素–因此，请使该

显示：block

，然后将其中的文本居中对齐。我应该删除psudo元素吗？或者如果可能@CBroe，您可以编写位代码吗？谢谢。我制作方框1是为了阐明我想要达到的效果。T但是你的答案并不能解决我的问题。问题的关键是找出如何使用javascript为contenteditable div占位符添加空白。“问题的关键[…]”–…是一个错误的开始。它只需要为用于显示占位符的伪元素添加两个CSS样式。这将使OP选择的方法起作用…但不会改变一个事实，即它是一个错误的开始。@CBroe当然，CSS是前进的方向，但这回答了特定的问题fic的问题，我认为这个问题很有趣，可以从这个意义上回答。我将做一个编辑，强调不要批评你的答案是错误的，

fromCharCode

（或者可能是

\u..

unicode符号）是在JS中创建不间断空格字符的方法。只有NBSP是正确的基线问题的“错误”解决方案；-）

<script>
$(document).ready(function(){
    alert("I need to use jquery to make box2 same as box1");
    var a= String.fromCharCode(160).repeat(5);
    var b="somewords";
    $("#comment_box2").attr("data-placeholder",a+b);

});
</script>

.comment_box[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
    content: attr(data-placeholder);
    color: #aaa;
    display: block;
    text-align: center;
}