In this screenshot, document.activeElement is set to the Title input, as we'd expect. You can check which element is currently focused by running document.activeElement in your console. Only one element can be focused at a time. If the user starts typing, the text they type will go into that input. This input is focused, but no text is selected. I wrote this blog post to help myself understand the subtle differences between each method. In large apps with lots of legacy non-React code, it's been tricky for me to find one method that always works. There are a lot of different ways to autofocus a text input in React. With this autofocusing, the user doesn't have to click on the text input they can just start typing. It opened a menu, with the Title text input autofocused and its text selected. In this screenshot of Trello, the user clicked the Add Checklist button. 3 ways to autofocus an input in React that ALMOST always work!Īutofocusing is a neat thing you can do to make your app easier to use.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |