Question

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

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

演示如下：

<html>
box1
<div id="comment_box1" class="comment_box" contenteditable="true" data-placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;somewords"></div>
box2
<div id="comment_box2" class="comment_box" contenteditable="true" data-placeholder=" "></div>

</html>


<style>
.comment_box[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
    content: attr(data-placeholder);
    color: #aaa;
}
.comment_box{
    min-height: 80px;
  border: 1px solid orange;
  width: 550px;
  text-align: left;
}
</style>


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

});
</script>

Answer 1

您正在处理非中断空格（其中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>

https://jsfiddle.net/mt5zy5r8/

虽然如果你的目标是对齐，css是一个更好的解决方案，正如@Cbroe在评论中指出的那样：

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

https://jsfiddle.net/mt5zy5r8/1/

Answer 2

以下是您的脚本的更新版本：

CGPathAddLineToPoint

它获取来自comment_box1的attr值将其存储在a中并将其放入comment_box2

Answer 3

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

这是一个代码片段的例子，我在输入中添加了一些类来设置样式文本，当它有一个占位符文本时，还添加了输入本身：

.first-input {
  width: 100px;
}
.second-input {
  width: 300px;
}
.third-input {
  width: 500px;
  color: red;
}
input {
  font-size: 15px;
  padding: 10px;
  margin: 10px;
}
input:placeholder-shown {
  border-color: red;
}
::-webkit-input-placeholder {
  text-align: center;
  letter-spacing: 3px;
}
::-moz-placeholder {
  text-align: center;
  letter-spacing: 3px;
}
:-ms-input-placeholder {
  text-align: center;
  letter-spacing: 3px;
}
:-moz-placeholder {
  text-align: center;
  letter-spacing: 3px;
}

<input type="text" class="first-input" placeholder="hello">
<input type="text" class="second-input" placeholder="hello">
<input type="text" class="third-input" placeholder="">

Jquery：无法将空格添加到contenteditable div的占位符

3 个答案: