SolidJS•5w ago

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..." />

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

6 Replies

MALEV0L3NT•5w ago

Make it disabled?

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

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

hyperknotOP•5w ago

then I cannot type anything

MALEV0L3NT•5w ago

Wait what's the point of this exactly? I'm confused what you're trying to do exactly...

hyperknotOP•5w ago

I'm trying to control what gets displayed in the textarea. For example @mention support for user input.

MALEV0L3NT•5w ago

maybe this thread could be helpful? https://github.com/solidjs/solid/discussions/416

GitHub

input are not controlled by value · solidjs solid · Discussion #4...

IMPORTANT: If you have a question or an idea for a new feature use Github Discussions instead Describe the bug I passed a string as value into <input/>. when user type, I didn't change th...

hyperknotOP•5w ago

Thanks, that's a great discussion. Best one I found so far is onBeforeInput + preventDefault()

Gaming

Programming

How to make controlled <textarea>

Did you find this page helpful?