1 min

Resolved - Auto-place cursor on input fields

#resolved
#junco

completed 22jul2013 - opted for HTML5 attr autofocus

Save user from one additional click and movement.

Will require a little JavaScript. Ensure that page degrades gracefully if .js is disabled.

  • After clicking on the "login" link, place cursor in text input field for username/e-mail
  • After clicking the "search" link, place cursor in text input field.
  • When creating a new post with the basic displays, place cursor in textarea box.
  • When logged-in and applicable and on the homepage, place cursor in the textarea box for the microblog post.

stackoverflow

jquery : http://stackoverflow.com/questions/7623827/how-set-cursor-inside-textbox-after-page-load-with-jquery

http://stackoverflow.com/questions/5521139/forcing-cursor-to-go-on-text-field

<script type="text/javascript">document.getElementById('search').focus()
</script>

Autofocus

Simple HTML attribute called "autofocus" works with text input fields and textarea boxes.

http://www.w3schools.com/tags/att_input_autofocus.asp
http://www.w3schools.com/tags/att_textarea_autofocus.asp

The autofocus attribute is a boolean attribute.

When present, it specifies that the text area should automatically get focus when the page loads.

The autofocus attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.

The autofocus attribute is new for the <textarea> tag in HTML5.

Given the choice between using an HTML5 attribute or JavaScript so it works in old browsers, I'll chose HTML5.

The autofocus not working in old IE is not that big of a deal.

From JR's : articles
194 words - 1568 chars - 1 min read
created on
updated on
import date 2013-08-12 21:51:38 - #
source - versions

Related articles
Resolved - Add auto-save and live preview to blog posts - Aug 21, 2013
Add a night mode display - Aug 08, 2013
Resolved - Add sort options to tag list page - Jun 27, 2013
Resolved - Add client-side Textile markup editor - Aug 21, 2013
Resolved - Fix YouTube embed code - Sep 05, 2013
more >>



A     A     A     A     A

© 2013-2017 JotHut - Online notebook

current date: Nov 14, 2024 - 11:56 p.m. EST