Use JS to get focus element code

Source: Internet
Author: User

  This article mainly introduces the use of JS to achieve focus (focusing) elements of the concrete implementation, the need for friends can refer to the following

For a good user experience, Web site/web app accessibility and availability, and functionality are critical.   When our website is running well/experiencing good times, users are not aware of it, but they are sure to feel it when we are not doing well. An important part of the usability and accessibility of an application is the processing of input focus (focusing), but this is a point that developers often overlook.     An example of poor input focus handling: Opening a window after clicking on a link, but not focusing the cursor on any element in the window. Even worse: Focus on an element in the modal window, but the focus does not return after the shutdown. Ideally, a reference is saved when the link is triggered, then the cursor is focused to a new window and the cursor is moved back in when the window closes.     But what if you don't know which element the input cursor is on now? With the Document.activeelement property we can get the focus in the current document!    The javascript    use Document.activeelement It's easy to find the currently selected element:  code is as follows: var focusedelement = document.activeelement;   //* For example:  var Triggerelement = document.activeelement;  Mymodal = new Mymodal ({  onopen:function () {  This.container.focus (); },  onclose:function () {  triggerelement.focus (); } });  */& nbsp   This property is not only available on regular input elements, including form fields or <a> tag links, but any element that has the TabIndex property set is available.     The reason I like document.activeelement is that you don't need to use event sniffing or a delegate listener to track down that element to get the focus-you can get this property at any time. Of course, you should do a lot of testing before using this feature--whether it's cross browser or race barWhat bugs are under the pieces. In a word, I am satisfied with it and feel it is very reliable! 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.