1

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.

2
  • Can you simply use the placeholder attribute from the lightning:input component? <lightning-input type="text" placeholder="[email protected]">
    – TSmith
    Commented Oct 21, 2020 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
    Commented Oct 21, 2020 at 9:32

1 Answer 1

1

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;
    min-height:90px;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .