CodeW3C Tasiyarun Online
HTML Tasiyarun Sana
Scriptar Browser
Scriptar Server
Tasiyarun Tasiyarun
XML Tasiyarun Sana
Kita na Tasiyarun
Kita na Tasiyarun
Kundin Ilimin
Kitaabu Tantuyar JS
Kitaabu Tantuyar JS (Kwarin Kikiyarin)
Kitaabu Tantuyar JS (Kwarin A - Z)
JavaScript
Array JS
Boolean JS
Class JS
Date JS
Error JS
Global JS
JSON JS
Map JS
Math JS
Number JS
Promise JS
RegExp JS
Set JS
Manzari JS
Manzili JS
Fariyar JS
Kwarin Gudan Fariyar JS
Fariyar JS
Array Tantuyar JS
Window
Object Window
Konsoli Window
Dokiyarin Window
Adarci Window
Nazarci Window
Kaiyarin Window
HTML DOM
HTML Doki
HTML Gida
HTML Kikiyarin
HTML Farin Gudan
HTML Event ɗarun
HTML Collection
HTML NodeList
HTML DOMTokenList
HTML Style
Web API
API Canvas
API Console
API Fetch
API Fullscreen
API Geolocation
API History
API MediaQueryList
API Storage
API Validation
API Web
HTML ɗarun
<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<head>
<header>
<h1> - <h6>
<hr>
<html>
<i>
<iframe>
<img>
<ins>
<input> button
<input> checkbox
<input> color
<input> date
<input> datetime
<input> datetime-local
<input> email
<input> file
<input> hidden
<input> image
<input> month
<input> number
<input> password
<input> radio
<input> range
<input> reset
<input> search
<input> submit
<input> text
<input> time
<input> url
<input> week
<kbd>
<label>
<legend>
<script>
</a></li> <li><a href="/ha/jsref/dom_obj_time.html" title="HTML DOM Time ɗanar"><time></a></li> <li><a href="/ha/jsref/dom_obj_title.html" title="HTML DOM Title ɗanar"><title></a></li> <li><a href="/ha/jsref/dom_obj_track.html" title="HTML DOM Track ɗanar"><track></a></li> <li><a href="/ha/jsref/dom_obj_u.html" title="HTML DOM Underline ɗanar"><u></a></li> <li><a href="/ha/jsref/dom_obj_ul.html" title="HTML DOM Ul ɗanar"><ul></a></li> <li><a href="/ha/jsref/dom_obj_var.html" title="HTML DOM Variable ɗanar"><var></a></li> <li><a href="/ha/jsref/dom_obj_video.html" title="HTML DOM Video ɗanar"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/ha/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ɗanar">CSSStyleDeclaration</a></li> <li><a href="/ha/jsref/jsref_type_conversion.html" title="JavaScript ɗanar ƙirafin nauyi">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ha/howto/index.html" title="CodeW3C.com ɗanar Kudade">CodeW3C.com ɗanar Kudade</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>onfocus 事件</h1> <div class="btn-toref"> <a href="/ha/jsref/dom_obj_event.html" title="Event HTML DOM">DOM ɗanar</a> <a href="/ha/jsref/obj_focusevent.html" title="HTML DOM FocusEvent ɗanar">FocusEvent</a> </div> <div> <h2>定义和用法</h2> <p>onfocus 事件在元素获得焦点时发生。</p> <p>onfocus 事件最常与 <input>、<select> 和 <a> 一起使用。</p> <p class="tip"><span>提示：</span> onfocus 事件与 <a href="/ha/jsref/event_onblur.html" title="onblur ɗanar">onblur ɗanar</a>相反。</p> <p class="tip"><span>提示：</span> onfocus 事件类似于 <a href="/ha/jsref/event_onfocusin.html" title="onfocusin ɗanar">onfocusin ɗanar</a>。主要区别在于 onfocus 事件不会冒泡。因此，如果您想确定一个元素或其子元素是否获得焦点，可使用 onfocusin 事件。但是，您可以通过对 onfocus 事件使用 <a href="/ha/jsref/met_element_addeventlistener.html" title="HTML DOM addEventListener() ɗanar">addEventListener() ƙan</a>na <i>useCapture</i> Gina takalma ƙaɗa ɗauka tashiwarin ƙaɗa.</p> </div> <div> <h2>Shafin</h2> <h3>Tiratar 1</h3> <p>Gina JavaScript ƙaɗa ɗauka ƙo ɗauka ƙarfe:</p> <pre class="language-html"> <input type="text" onfocus="myFunction()"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocus">Juyin ƙalubalanta</a></p> <p>Rannu na ƙasa ya ƙasa ƙaɗa TIY ƙan.</p> </div> <div> <h2>Lanarinde</h2> <p>Farin HTML:</p> <pre class="language-html"> <<i>element</i> onfocus="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocus_html">Juyin ƙalubalanta</a></p> <p>Farin JavaScript:</p> <pre class="language-js"> <i>object</i>.onfocus = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocus_dom">Juyin ƙalubalanta</a></p> <p>Farin JavaScript, gina ɗauka addEventListener() ƙan:</p> <pre class="language-js"> <i>object</i>.addEventListener("focus", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocus_addeventlistener">Juyin ƙalubalanta</a></p> <p class="note"><span>Bincade:</span>Internet Explorer 8 ko tashiwarin ƙo ƙaɗa <a href="/ha/jsref/met_element_addeventlistener.html" title="HTML DOM addEventListener() ɗanar">addEventListener() ƙan</a>。</p> </div> <div> <h2>技术细节</h2> <table class="definition-usage"> <tr> <th>冒泡：</th> <td>不支持</td> </tr> <tr> <th>可取消：</th> <td>不支持</td> </tr> <tr> <th>事件类型：</th> <td><a href="/ha/jsref/obj_focusevent.html" title="HTML DOM FocusEvent ɗanar">FocusEvent</a></td> </tr> <tr> <th>支持的 HTML 标签：</th> <td>所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title></td> </tr> <tr> <th style="width: 25%;">DOM 版本：</th> <td>Level 2 Events</td> </tr> </table> </div> <div> <h2>浏览器支持</h2> <table class="browser-support"> <tr> <th class="bsTh">事件</th> <th class="bsChrome">Chrome</th> <th class="bsIE">IE</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>onfocus</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> </tr> </table> </div> <div> <h2>更多实例</h2> <h3>例子 2</h3> <p>将 "onfocus" 与 "onblur" 事件一起使用：</p> <pre class="language-js"> <input type="text" onfocus="focusFunction()" onblur="blurFunction()"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onblur_onfocus">Juyin ƙalubalanta</a></p> <h3>例子 3</h3> <p>清空获得焦点的输入字段：</p> <pre class="language-js"> 当输入字段获得焦点时，将其当前值替换为空字符串： <input type="text" onfocus="this.value=''" value="Blabla"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocus_clear">Juyin ƙalubalanta</a></p> <h3>例子 4</h3> <p>事件委托：将 addEventListener() 的 useCapture 参数设置为 true：</p> <pre class="language-js"> <form id="myForm"> <input type="text" id="myInput"> </form> <script> var x = document.getElementById("myForm"); x.addEventListener("focus", myFocusFunction, true); x.addEventListener("blur", myBlurFunction, true); function myFocusFunction() { document.getElementById("myInput").style.backgroundColor = "yellow"; } function myBlurFunction() { document.getElementById("myInput").style.backgroundColor = ""; } </script> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocus_eventdelegation">Juyin ƙalubalanta</a></p> <h3>例子 5</h3> <p>事件委托：使用 focusin 事件（Firefox 不支持）：</p> <pre class="language-js"> <form id="myForm"> <input type="text" id="myInput"> </form> <script> var x = document.getElementById("myForm"); x.addEventListener("focusin", myFocusFunction); x.addEventListener("focusout", myBlurFunction); function myFocusFunction() { document.getElementById("myInput").style.backgroundColor = "yellow"; } function myBlurFunction() { document.getElementById("myInput").style.backgroundColor = ""; } </script> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=event_onfocusin_eventdelegation">Juyin ƙalubalanta</a></p> </div> <div class="btn-toref"> <a href="/ha/jsref/dom_obj_event.html" title="Event HTML DOM">DOM ɗanar</a> <a href="/ha/jsref/obj_focusevent.html" title="HTML DOM FocusEvent ɗanar">FocusEvent</a> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> Tashe </center><h3> <h5 id="tools_reference"><a href="/ha/jsref/index.html">Kita na JavaScript da HTML DOM</a></h5> <h5 id="tools_example"><a href="/ha/js/js_examples.html">Shirin JavaScript</a></h5> <h5 id="tools_quiz"><a href="/ha/js/js_quiz.html">Juyin ƙalubalanta JavaScript</a></h5> <h5 id="tools_tutorial"><a href="/ha/js/index.html">Tuturu JavaScript</a></h5> </div> <div><h3><center> Rarraba mai ra'ayi </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com ɗanar yanar gizo kawai don horo da ƙirafin, ba a gudanar da ƙirafin ba. Risici na amfani da yanar gizo na yau ba a gudanar da shi ba. Ɗaya ce, a ƙauna, a gudanar da duk ɗayan ɗayan. Ɗaya ce, a gudanar da duk ɗayan ɗayan. </p> <p id="p2"> <a href="/ha/about/index.html" title="Tana bayanin CodeW3C.com">Tana bayanin CodeW3C.com</a> <a href="/ha/about/about_helping.html" title="Yin CodeW3C.com">Yin CodeW3C.com</a> <a href="/ha/about/about_use.html" title="Tana bayanin amfani">Kwarin amfani</a> <a href="/ha/about/about_privacy.html" title="Tana bayanin ƙauna">Kwarin ƙauna</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Kan dake da Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>