CodeW3C အွန်လိုင်း စာပေ
HTML စာပေ စာရင်း
ကွန်ပျူတာ အမှု
ရှိခိုက် အမှု
ပရိုဂရမ် စာပေ
XML စာပေ စာရင်း
ဝက်စာ စာရင်း
ဝက်စာ ဂရိုက်လ်
အစီအစဥ်
JS အမှတ်ပြုကျမ်း
JS အမှတ်ပြုကျမ်း (အမျိုးအစားအထိုး)
JS အမှတ်ပြုကျမ်း (အက္ခရာအထိုး)
JavaScript
JS အပေါင်း
JS အခွင့်
JS အကွက်
JS အချိန်
JS အမှာ
JS ကွန်ပျူတာ
JS JSON
JS အပိုင်
JS အကြမ်း
JS အကြမ်း
JS အမြတ်
JS အချက်အလက်
JS အပေါင်း
JS အစကား
JS အပေါင်း
JS အဆို
JS အဆို အရေးပါခြင်း
JS အဆို
JS ပုံစံအုပ်
ဝန်ကြီးဌာန
Window အရာ
ဝန်ကြီးဌာန ကျင်း
ဝန်ကြီးဌာန သမိုင်း
ဝန်ကြီးဌာန ခရီးလမ်း
ဝန်ကြီးဌာန ကုန်းပိုင်
ဝန်ကြီးဌာန အဆိုပါ
HTML DOM
HTML အချုပ်
HTML အအုပ်
HTML အခွင့်
HTML အခင်း
HTML အမှုထမ်း အကိုးခံ
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
Web API
HTML အမှုထမ်း
<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="/my/jsref/dom_obj_time.html" title="HTML DOM Time အကို"><time></a></li> <li><a href="/my/jsref/dom_obj_title.html" title="HTML DOM Title အကို"><title></a></li> <li><a href="/my/jsref/dom_obj_track.html" title="HTML DOM Track အကို"><track></a></li> <li><a href="/my/jsref/dom_obj_u.html" title="HTML DOM Underline အကို"><u></a></li> <li><a href="/my/jsref/dom_obj_ul.html" title="HTML DOM Ul အကို"><ul></a></li> <li><a href="/my/jsref/dom_obj_var.html" title="HTML DOM Variable အကို"><var></a></li> <li><a href="/my/jsref/dom_obj_video.html" title="HTML DOM Video အကို"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/my/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration အကို">CSSStyleDeclaration</a></li> <li><a href="/my/jsref/jsref_type_conversion.html" title="JavaScript အမှုန်ဆန်ခြင်">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/my/howto/index.html" title="CodeW3C.com ဘောင်းကုန်အိမ်">CodeW3C.com ဘောင်းကုန်အိမ်</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="/my/jsref/dom_obj_event.html" title="HTML DOM အခင်း">DOM 事件</a> <a href="/my/jsref/obj_focusevent.html" title="HTML DOM FocusEvent">FocusEvent</a> </div> <div> <h2>定义和用法</h2> <p>onfocus 事件在元素获得焦点时发生。</p> <p>onfocus 事件最常与 <input>、<select> 和 <a> 一起使用。</p> <p class="tip"><span>提示：</span> onfocus 事件与 <a href="/my/jsref/event_onblur.html" title="onblur အခမ်း">onblur အခမ်း</a>相反。</p> <p class="tip"><span>提示：</span> onfocus 事件类似于 <a href="/my/jsref/event_onfocusin.html" title="onfocusin အခမ်း">onfocusin အခမ်း</a>。主要区别在于 onfocus 事件不会冒泡。因此，如果您想确定一个元素或其子元素是否获得焦点，可使用 onfocusin 事件。但是，您可以通过对 onfocus 事件使用 <a href="/my/jsref/met_element_addeventlistener.html" title="HTML DOM addEventListener() နည်းလမ်း">addEventListener() စက်ရုံး</a>的 <i>useCapture</i> 参数来实现这一点。</p> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>当输入字段获得焦点时执行 JavaScript：</p> <pre class="language-html"> <input type="text" onfocus="myFunction()"> </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_onfocus">亲自试一试</a></p> <p>页面下方有更多 TIY 实例。</p> </div> <div> <h2>语法</h2> <p>在 HTML 中：</p> <pre class="language-html"> <<i>element</i> onfocus="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_onfocus_html">亲自试一试</a></p> <p>在 JavaScript 中：</p> <pre class="language-js"> <i>object</i>.onfocus = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_onfocus_dom">亲自试一试</a></p> <p>在 JavaScript 中，使用 addEventListener() 方法：</p> <pre class="language-js"> <i>object</i>.addEventListener("focus", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_onfocus_addeventlistener">亲自试一试</a></p> <p class="note"><span>注释：</span>Internet Explorer 8 或更早的版本不支持 <a href="/my/jsref/met_element_addeventlistener.html" title="HTML DOM addEventListener() နည်းလမ်း">addEventListener() စက်ရုံး</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="/my/jsref/obj_focusevent.html" title="HTML DOM FocusEvent">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="/my/tiy/t.html?f=event_onblur_onfocus">亲自试一试</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="/my/tiy/t.html?f=event_onfocus_clear">亲自试一试</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="/my/tiy/t.html?f=event_onfocus_eventdelegation">亲自试一试</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="/my/tiy/t.html?f=event_onfocusin_eventdelegation">亲自试一试</a></p> </div> <div class="btn-toref"> <a href="/my/jsref/dom_obj_event.html" title="HTML DOM အခင်း">DOM 事件</a> <a href="/my/jsref/obj_focusevent.html" title="HTML DOM FocusEvent">FocusEvent</a> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/my/jsref/index.html">JavaScript နှင့် HTML DOM ဂရိုက်လ်</a></h5> <h5 id="tools_example"><a href="/my/js/js_examples.html">JavaScript 实例</a></h5> <h5 id="tools_quiz"><a href="/my/js/js_quiz.html">JavaScript 测验</a></h5> <h5 id="tools_tutorial"><a href="/my/js/index.html">JavaScript 教程</a></h5> </div> <div><h3><center> 赞助商链接 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 </p> <p id="p2"> <a href="/my/about/index.html" title="အခြေခံ CodeW3C.com">အခြေခံ CodeW3C.com</a> <a href="/my/about/about_helping.html" title="အကူအညီ CodeW3C.com">အကူအညီ CodeW3C.com</a> <a href="/my/about/about_use.html" title="အသုံးပြုခြင်း အခြေခံ">အသုံးပြုခြင်း အခြေခံ</a> <a href="/my/about/about_privacy.html" title="သတင်းအကျဉ်း အခြေခံ">သတင်းအကျဉ်း အခြေခံ</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="ပြင်ဆင်သည် Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>