CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Raymond Jhang
Raymond Jhang

Reputation: 21

Jquery: unable to add whitespace to the placeholder of contenteditable div

For my contetedible div, I need to use javascript to prepend some whitespace in the placeholder, in order to center the text of a flexible-length placeholder.

However, it seems impossbile to add multiple whitespace before the paceholder text.

Demo below: 

<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>

Upvotes: 1

Views: 965

Answers (3)

Juan Carlos Medina Mart&#237;nez
Juan Carlos Medina Mart&#237;nez

Reputation: 1

You should use css to align the text in the placeholder, use the pseudo classes for input-placeholder.

Here is an example of the snippet, i add some classes to style text inside the input, and also the input itself when it has a placeholder text:

.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="">

Upvotes: -1

Steve
Steve

Reputation: 20469

you are dealing with non breaking spaces (5 of them), so you need to use the correct char:

<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/

Though if alignment is your goal, css is a far better solution, as noted by @Cbroe in comments:

.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/

Upvotes: 3

StealthSpoder
StealthSpoder

Reputation: 346

Here is an updated version of your script:

$(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;&nbsp;&nbsp;&nbsp;&nbsp" not working also
    var b="somewords";
    $("#comment_box2").attr("data-placeholder",a);

});

It gets the attr value from comment_box1 stores it in a and places it in comment_box2

Upvotes: 0

Related Questions