Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Textarea with Multiple Placeholders

We are trying to implement a text area similar to below where in in a single sentence, there are multiple placeholders. We are using react for this. Is it possible to achieve below result using any controls?
I was able to find multiple resources where we can add "multiline" watermark/placeholders. But here, we need it at multiple places within the same line/paragraph.

enter image description here

Tags:

2

Answers


  1. 0

    Here I think we need to use more customizable approach, Bcz U know HTML doesn’t provide that support multiple placeholders.

    I think it’s better if we can add two different divs for Text area and the Text Placeholder, then we can customize them separately also the design with CSS too.

     <div className="text-area-container">
      <div
        contentEditable
        className="content-editable"
        onInput={handleInput}
        placeholder="Type here..."
        aria-placeholder="Type here..."
      >
        {content}
      </div>
      <div className="placeholders">
        <span className="placeholder" style={{ left: '10%' }}>Placeholder 1</span>
        <span className="placeholder" style={{ left: '50%' }}>Placeholder 2</span>
        <span className="placeholder" style={{ left: '80%' }}>Placeholder 3</span>
      </div>
    </div>

    Use Separate CSS

    .text-area-container {
  width: 100%;
}

.content-editable {
  width: 100%;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.placeholders {
  width: 100%;
}

.placeholder {
  color: #aaa;
}
    Login or Signup to reply.
  2. 0

    if you are referring to the textarea tag, then nested input tags is not possible because other than plain text, textarea doesn’t get the other tags, if you do so nested tags will act as strings.
    Use parent div and add the text along with the input tags, it would be helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search