Is it possible to make it so that when a user clicks a text, the text turns into an input box?

Is it possible to make it so that when a user clicks a text, the text turns into an input box?

Technically, no, you can’t change an element to another one. But you can definitely make it look like you did. You could have an input with a dynamic placeholder or initial content that is styled without any borders to make it look like just text and then when clicked, that is, when the input is focused, style it so that it has a bottom or full box border to let the user know they can start typing (although they’ll also see the flashing line thing).

2 Likes

The way @romanmg suggested is how I would have done it. Before doing so though, from a UX perspective, have you considered how the user will know it is editable?

5 Likes

What if when a user clicks on the word. A text field pops up on top with a small x to close it?. If you bind it to the text, it will automatically use the new word.

You could rig something to appear inline with the text, but responsive would be a nightmare.

1 Like

just intuition. I think learning that the text is clickable would let the user learn that they can click and change it.

In addition to this and @Scott’s comment, for desktop users you may be able to get away with an edit icon that appears on hover. For mobile, I would heed Scott’s warning and make it more obvious.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.