Edit input field on :focus
I want to create a input form that will have a width adjusted to the amount of text in it like in the picture
![](https://cdn.answeroverflow.com/1117421799249039360/image.png)
48 Replies
I think that you will need to use JavaScript to observe the key input and adjust the width of the input according to the number of characters.
I don't really see why you'd want to do this in the first place
If you're expecting the user to type a lot in an input field I would use the textarea element and that should give the user a lot of room to type
no its just a title, full description and other stuff will be avaiable when user hover on it ar click
What other information will be available when the user hovers or clicks? Doesn't sound like great UX unless it's decorative
basic stuff like who added this, when and description
is it good or i should change my idea
I'm not really sure the full context. Your picture shows cards but you're asking about input fields? Are the input fields inside your cards?
Or are the cards the input fields themselves
and input is only when user click on title to change it
But why do you want to hide the information until the user clicks or hovers?
Oh I think I see what you mean
Okay
Yea I'm not really sure about this, I've never really seen anything like this. Usually if a website allows a user to edit certain content they'll either have a modal or bring them to another page to allow editing.
I'd recommend either of those 2
If you're just doing this for a project to learn that's fine but if you're hoping for other users to use it I'd try to research some ways editing content are typically implemented
its for myself, I was curious if thats even possible
Yea for sure, pretty much anything is possible in js.
I can make a codepen rq
maybe it is, but I won't bother with that right now
is there any way to make a input 100% of item width?
yup
So you want it so that when the user types in things it will keep expanding the width?
Or do you want something like a textbox
![](https://cdn.answeroverflow.com/1117425831678062652/image.png)
just to make it bigger
How big? To fill the container it's in?