htmltextareatext-cursor

How to show textarea cursor automatically?


Can you guys tell me how to show textarea cursor automatically? Usually when i click on textarea i have an text cursor. Is there any possibility to show it straightaway?


Solution

  • Set the autofocus attribute (MDN, spec) on the control.

    <textarea rows="4" cols="30" autofocus></textarea>
    

    It is also possible to set it with JavaScript, but that can interfere with normal use of the page (especially with screen readers which use the focus point to read from) (so can the autofocus attribute, but it is at least standard so screen reader software can be written to work around it).

    The JavaScript technique I don't recommend is:

    <textarea rows="4" cols="30" id="mytextarea"></textarea>
    <script> document.getElementById('mytextarea').focus(); </script>
    

    Note that this does not use the onload event. That event doesn't fire until the entire document, including dependencies such as images, is loaded so there is usually a significant delay in which the user might start interacting with the page. Setting the focus after that point is likely to break whatever the user is in the middle of.