Home >Web Front-end >HTML Tutorial >Solution to div unable to trigger blur event_html/css_WEB-ITnose
Solution to div unable to trigger blur event_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:53:571376browse
By default, div cannot obtain focus and cannot trigger focus and blur events. It is assumed that span, a and other tags cannot trigger focus events (input:button, and button tags can trigger)
How to Make the div trigger the blur event: You can add the tabindex attribute to the div
Online demonstration: http://sandbox.runjs.cn/show/e0bvfcag
Source code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: #3295F2; } </style> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script></head><body> <input type="text" /> <input type="button" value="测试" class="but"/> <button>kkk</button> <div class="box" tabindex="1"></div> <script> $('.box').focus(function(){ alert('div focus'); }); $('.box').blur(function(){ alert('div blur'); }); $('.but').focus(function(){ alert('but'); }); $('.but').blur(function(){ alert('but'); }); $('button').focus(function(){ alert('but'); }); $('button').blur(function(){ alert('but'); }); </script></body></html>
demo: http://www .w3school.com.cn/tiy/t.asp?f=html_standard_tabindex
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn