How to set the input area height equal to the placeholder paragraph's height

Question

Because the placeholder contains too many text, in order to show them, I use white-space:pre-line on the placeholder, so the placeholder text become multiple line paragraph, but the input height doesn't change.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  white-space:pre-line;  
}
::-moz-placeholder { /* Firefox 19+ */
     white-space:pre-line;
}
:-ms-input-placeholder { /* IE 10+ */
    white-space:pre-line; 
}
:-moz-placeholder { /* Firefox 18- */
     white-space:pre-line;
}
input {
    width:300px;
    height:30px; /* I hope the height is not a static value, but can auto equal to the placeholder paragraph's height*/
}

<input type="text" placeholder="There are too many text, in order to show them, I set it to white-space:pre-line so it become multiple line paragraph"/>

To set a static height on input is not a good idea, because if the user zoom to resize the browser, the placeholder text size changes as well, the placeholder become two line or three line which is dynamic.

Is there a way to set the input area height equal to the placeholder paragraph's height?

I can't think of a way to do this with input but could you switch to using a contenteditable div? There are some interesting ideas on dealing with placeholders in such an element at https://stackoverflow.com/questions/20726174/placeholder-for-contenteditable-div — A Haworth, Dec 02 '21 at 07:24

score 0 · Answer 1 · answered Dec 12 '21 at 00:24

You can do something like this

I hope, I helped you

HTML

<div id="test"></div>
<input placeholder="There are too many text, in order to show them, I set it to white-space:pre-line so it become multiple line paragraph">
<input placeholder="Please enter name, address">

CSS

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  white-space:pre-line;  
}
::-moz-input-placeholder { /* Firefox 19+ */
     white-space:pre-line;
}
:-ms-input-placeholder { /* IE 10+ */
    white-space:pre-line; 
}
:-moz-placeholder { /* Firefox 18- */
     white-space:pre-line;
}

input::placeholder {
    width:100%;
    position:absolute;
    top:10px;
}

var input = document.querySelectorAll('input');
for(i=0; i<input.length; i++){
    let div = document.createElement("div");
    div.style.width = input[i].clientWidth + "px";
    div.style.display = "inline-block";
    div.innerHTML = input[i].getAttribute('placeholder');
    
    console.log(div);
    document.getElementById("test").append(div);
    let height = div.offsetHeight;
    input[i].setAttribute('style', 'height:' + (height + 10) + 'px');
    
}
document.getElementById("test").parentNode.removeChild(document.getElementById("test"));

How to set the input area height equal to the placeholder paragraph's height

1 Answers1