How to make controlled <textarea>

I'm trying to make the simplest possible controlled textarea. What I want is to show only and exactly what I set, not what the user types.

My problem is that this only works for one single character, after which the user can just type freely.

Minimal repro case:

  const [text, setText] = createSignal('')
  return <textarea value={text()} onInput={(e) => setText('x')} placeholder="Type something..." />

  const [text, setText] = createSignal('')
  return <textarea value={text()} onInput={(e) => setText('x')} placeholder="Type something..." />

  const [text, setText] = createSignal('')
  return <textarea value={text()} onInput={(e) => setText('x')} placeholder="Type something..." />

  const [text, setText] = createSignal('')
  return <textarea value={text()} onInput={(e) => setText('x')} placeholder="Type something..." />

In this example, if the user types "abc" -> "xbc" appears. I want it to simply show x, no matter what happens.

How to make controlled <textarea>

Similar Threads

Similar Threads

Similar Threads