make input field expand vertically
hi, i want to make my input field expand vertically when the text overflows, i attached a quick video snippet to show you what i mean
23 Replies
what you want is a
textarea instead of an inputyou could also use a regular div with contenteditable so it can auto grow with the content.
but then you''ll need some extra work if you want to handle it just like other form elements
here an example from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role
with this you can style the element just to way you like it
well, i want something more like whatsapp for example:
than this:
oh okay, i see, i'll check this out, thanks
can i have a placeholder in this
contenteditable div?like this
then it dissapears when a user types
no really, but you could use a pseudo element which hides when element is :not(:empty)
ah okay, i'll try that
discord has something similar
something like this. I only did not find a way yet to get placeholder back when you delete all text. because there will be some elements left in the html that make it not empty
so probaly some more js needed
https://codepen.io/MarkBoots/pen/KKBpeVL
ohh, okay, thanks a lot for that! 🙂
by the way, just a quick question, i noticed, on mine and yours, whenever i paste in anything, that literally gets pasted
for example, code from vscode gets pasted literally as code:
how can i kind of "sanitize" this and have it just paste as text?
if u try to copy code from vscode and paste into discord, it doesn't have the same behavior; it pastes as plain text as expected
yea, probably because it is just content of a div, it will paste styling from the clipboard too. hm difficult
not sure if i have a good solution for that right away.
you can see it here, it copies the inline styling. then we would need js to remove it when pasting
Have to think about that one
hmm yeah, interesting too
i've updated the pen a bit. not sure if it covers everything
dang, yeah, it seems to work well! seems like pretty complex stuff too. if you don't mind explaining, how did you manage to get that done? or maybe reference to some doc which i can further read on this
well the input event is quite easy, it just checks if there is content and set the place holder on/off
the paste event i got from here https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event. It will grab only the text from the clipboard.
Element: paste event - Web APIs | MDN
The paste event is fired when the user has initiated a "paste" action through the browser's user interface.
thanks a lot for your great help! 🙂
np, good luck.
make sure you fork the pen if you think you need it later for refference, (I might delete it later)
ah okay, for sure, got it
pen removed, back up
