I improved the textarea, and I'll show you how I did it here!
Here's the final result:
The base
We are gonna use a textarea to imp...
For further actions, you may consider blocking this person and/or reporting abuse
I've made many "improved" text fields in the past. But I always bump info many edge cases. But it's a really fun and educative process I think. Good luck!
PS: ctrl-z / undo has weird behaviour when writing some thing like
<test>. You remove the content, write some more and than hit undo / ctrl-z.Yeah, inserting the extra characters messes up the undo tree
You can fix that by fireing keypress events instead of overwriting values.
Nice tip! Will definitely try it
That sounds intresting, could just send me the links to them if you have them on GitHub or something?
Hey there! If you have any more ideas for more improvements, just comment down below. Here's my current Todo list:
List improvements-[ ]listsAuto resize textareas<insert character>(Highly unlikely)Find a way to not mess up the undo tree (try to use keypress events)How do you keyboard navigate out of the textarea when tab inserts a tab proper?
I think I already mentioned it in the post, right?
I'm asking because you have making the textarea more accessible as one of your motivations, but then removed tab functionality from the user - which actually causes the post to not be accessible because trying to navigate the first codepen traps the user.
Even if you move the functionality to another key, you're moving the functionality away from where the user is expecting it, and I'm not sure how you would notify the user that they now need to push something other than tab to navigate out of the box.
Yeah, that's right. I've thought about it but I got no ideas, so I didn't mention it too much in the post.
Do you have any ideas on how to fix it?
I think the solution is to not modify the tab functionality and include a snippet shortcut for adding tab literals?
Good idea! I think what we could do is add another keybinding for inserting a tab, maybe alt + tab
I know 😅, Maybe we could just use an alternate key? Maybe.
I use an international keyboard where I can press ' and then "a" to have "á". If I want to use double quotes I press " and then space. In the textarea above, it creates """" instead of "".
Nice idea but there are so many edge cases that the cost to develop something like this would be simply not worth it for the majority of the projects out there.
Nice article. It would be great to see how you implement the "@" feature when you tag someone.
That's a DEV specific thing, so that's a bit far on my list
Hmm, I could add that sometime. Nice suggestion!