I am trying to show some text in normal font along with placeholder (like below image) as a default in a textarea box. enter image description here

Since, I don't think it is possible to have both placeholder and other text string at the same time(not absolutely sure though), I am thinking to show text with look and feel of placeholder by applying some css.

Since, text area accepts any input as string, I am unable to add any css to text. I have tried with innerHtml but it does not help.

.html file

<textarea class=" abc slds-textarea" name="textareafield"></textarea>

.js file

this.template.querySelector('.abc').innerHTML = '<b>sample</b>';

I have also tried with <div contenteditable="true"></div> and html does get applied but since look and feel of the div is different than textarea, I cannot use this as solution.

  • Can you simply use the placeholder attribute from the lightning:input component? <lightning-input type="text" placeholder="username@example.com">
    – TSmith
    Oct 21 '20 at 9:02
  • When any text is added , placeholder text will disappear and also, I have to use textarea instead of normal text box. So, this will not work.
    – devforce
    Oct 21 '20 at 9:32

I end up using <div contenteditable> and applying bunch of css to make it look like textarea.

.html file

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable 
onkeyup={handleChange} lwc:dom="manual"></div>

.js file

let divTextarea = this.template.querySelector('.divTextarea');
divTextarea.innerHTML = '<p>default line 1</p>'+'<p style="color:grey">default line 2</p>';

.css file

.divTextarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    overflow: auto;
    -ms-overflow-y: scroll;
    padding: 0.5rem 0.75rem;
    resize: vertical;
    width: 100%;
    height: 90px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.