html input behaviour
i've been wondering about this for awhile. when your text input starts running out of room the right side of it starts to disappear (as shown in this screen recording; gave the input a bg of hotpink to further illustrate) and its value starts getting cut off. is there a way to stop this behaviour or always make sure its the width of its value? (well besides min-width: npx or something)
like does it recognize its input.value as content ? doesnt seem like it or it wouldnt hide itself, it would overflow which would be better.
8 Replies
unfortunatly there is no native solution for it .... yet. If i remember correctly there is something coming to auto size the input to the value size (will try to find a refference to it)
for now, you could make your current input a button or div or whatever (maybe a div with contenteditable so you can still type in it) and then with js copy it to a temp input for the clipboard copy
something like this: (pen removed, see screenshot below)
ohw, i've found the new property:
field-sizing: content
It is already in chromium
here an earlier post were i have an example https://discord.com/channels/436251713830125568/1223333018798788618/1223541118508204092ohh thats exciting! i will have to add it to my list of properties/functions to watch!
wow i wouls have never thought of that , to create an remove a textarea. it happens so fast i dont even see it in the dom
you could even hide it with css to be sure
if its hidden with
display: none will the text still be selectable for the function or would it have to be an opacity/visibility property? or perhaps an 'sr-only' class ?
also is there a reason you chose textarea and not input[type=text] or just personal preference?Not for sure, but a fixed position (no shifting in the document) and 0 opacity should be enough for that short amount of time
Both input and textarea are okay. I had copied it from a project i used before. there i did want to show it for a short time
Gotcha thank you ❣️
I removed the pen, here a screenshot for future reference
Thank you, I think i forked it too🙏🏻