Home > Others

Focus on Elements

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In general, focus and blur events can be used only for form elements and links. Therefore, jquery is no longer used for many elements. However, as long as you set a tabindex attribute for the element node, non-form elements may also use these two events.

However, by default, elements that can use focus events generally support tabindex events. Why? In essence, the focus event elements are not only supported by default. in IE, the body, frame, IFRAME, IMG, isindex, and object have the ability to retrieve and lose focus by default. For other standard browsers, there may be differences between them. Therefore, we cannot simply add the tabindex attribute to a non-focus element through exclusion. Instead, we use a better method to perform further operations by checking whether the current element has been explicitly or implicitly set this attribute. The following are detection functions:

 
VaR hasattr = function (El, name) {var ATTR = El. getattributenode & El. getattributenode (name); Return ATTR? ATTR. specified: false}

If the returned value is false, we will set the tabindex attribute for this element. For the tabindex attribute, W3C also provides an example. If tabindex is negative, the element cannot use the tab key for navigation, but the focus is also obtained. If it is between 0 and 32767, you can navigate by tabindex value. If the tabindex of several elements is zero, the navigation is executed in the order of the document flow. For more information about tabindex, see my other article.

Through the above analysis, tabindex is undoubtedly set to a negative number, which will not damage the original tab navigation system. By the way, after the focus is obtained, the element has a dotted box, and some people will try to remove it. In fact, this is undoubtedly a trample on the ease of use of the page. We also need to consider the needs of some special groups, such as the mouse-free experts, poor people with bad mouse or people with poor eyesight. YesArticleIntroduction: removing the dotted box is illegal in the United States. This is a type of discrimination against persons with visual impairment!

The completeProgram:

 var hasattr = function (El, name) {var ATTR = el. getattributenode & el. getattributenode (name); Return ATTR? ATTR. specified: false} var addevent = function (OBJ, type, callback) {If (obj. addeventlistener) {obj. addeventlistener (type, callback, false);} else if (obj. attachevent) {obj. attachevent ("On" + type, callback) ;}} var focus = function (El, FN) {If (! Hasattr (El, "tabindex") El. tabindex =-1; addevent (El, "Focus", function (e) {fn. call (El, (E | window. event) ;};}

<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> let elements get focus by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> window. onload = function () {</P> <p> var hasattr = function (El, name) {<br/> var ATTR = el. getattributenode & el. getattributenode (name); <br/> return ATTR? ATTR. specified: false <br/>}< br/> var addevent = function (OBJ, type, callback) {<br/> If (obj. addeventlistener) {<br/> obj. addeventlistener (type, callback, false); <br/>} else if (obj. attachevent) {<br/> obj. attachevent ("On" + type, callback); <br/>}< br/> var focus = function (El, FN) {<br/> If (! Hasattr (El, "tabindex") <br/> el. tabindex =-1; <br/> addevent (El, "Focus", function (e) {<br/> fn. call (El, (E | window. event); <br/>}); <br/>}< br/> focus (document. getelementbyid ("AAA"), function (e) {<br/> alert (E. type) <br/> alert (this. innerhtml) <br/> }); <br/>}< br/> </SCRIPT> <br/> <style type = "text/CSS"> <br/> body {<br/> padding: 20px 100px; <br/>}< br/> A {<br/> color: # ffdead; <br/>}< br/> # AAA {<br/> padding: 10px; <br/> width: 100px; <br/> Height: 100px; <br/> Background: #4dc2f2; <br/> color: # ff8c00; <br/> font-weight: bolder; <br/>}< br/> </style> </P> <p> </pead> <br/> <body> <br/> <p> <pref = "http://www.cnblogs.com/rubylouvre/archive/2010/05/03/1726334.html"> focus element </a> </p> <br/> <Div id = "AAA"> <br/> focus element <br /> </div> </P> <p> </body> <br/> </ptml> <br/>

RunCode

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More