How to Implement div with no focus Event _ javascript skills

Source: Internet
Author: User
Blur is only for form Controls. For span, div, li, and so on, they cannot be triggered. This article provides an example, to see how it is implemented, read the following events (from w3c) first ).

Blur event: a blur event occurs when the element loses focus.

Focus event: the focus () method is used to assign a focus event to the text domain (also to give some elements a focus event ).

TabIndex attribute: The tabIndex attribute can be set or the return button's tab key control order.

We all know that blur only targets form controls. For span, p, li, and so on, they cannot be triggered, now we only need to set a tabindex attribute to trigger their focus events.

Real project code:

The Code is as follows:


Esc. PopupMenu. prototype. _ createPopup = function (){
Var popupDiv = $ ('

'); // Create p
PopupDiv. appendTo (this. _ owner. element); // Add p to span
Var _ popup = popupDiv [0];
_ Popup. hide = function (){
PopupDiv. hide ();
},
_ Popup. show = function (){
PopupDiv. show ();
PopupDiv. focus (); // get p focus
};
PopupDiv. blur (function (){
PopupDiv. hide ();
});
Return _ popup;
}


This Code indicates that I use p to simulate a createPopup (IE can be directly generated). When it is generated, A tabindex attribute is provided, and span is added to it to support display and hiding. It is particularly worth noting that popupDiv, focus (), must give p a focus, otherwise it does not have how to lose the focus.
Related Article

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.