CodeW3C สารสนเทศออนไลน์
หลักสูตร HTML ชุด
สคริปต์เบราเซอร์
สคริปต์เซิร์ฟเวอร์
หลักสูตรการเขียนโปรแกรม
หลักสูตร XML ชุด
คู่มือสร้างเว็บไซต์
คู่มืออ้างอิง
ตารางวัน
JS คู่มืออ้างอิง
JS คู่มืออ้างอิง (เรียงตามหมวดหมู่)
JS คู่มืออ้างอิง (เรียงตามตัวอักษร)
JavaScript
JS 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 String
JS วัตถุ
JS ตัวเลข
JS ลำดับความสำคัญตัวเลข
JS คำสั่ง
JS อนุกรมตัวเลข
Window
Object Window
Window Console
Window History
Window Location
Window Navigator
Window Screen
HTML DOM
HTML Document
HTML Element
HTML Attribute
HTML Event
HTML Event วัตถุ
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 วีบ
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>
<li>
<link>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strong>
<sub>
<summary>
<sup>
</a></li> <li><a href="/th/jsref/dom_obj_time.html" title="HTML DOM Time วัตถุ"><time></a></li> <li><a href="/th/jsref/dom_obj_title.html" title="HTML DOM Title วัตถุ"><title></a></li> <li><a href="/th/jsref/dom_obj_track.html" title="HTML DOM Track วัตถุ"><table></a></li> <li><a href="/th/jsref/dom_obj_u.html" title="HTML DOM Underline วัตถุ"><tbody></a></li> <li><a href="/th/jsref/dom_obj_ul.html" title="HTML DOM Ul วัตถุ"><td></a></li> <li><a href="/th/jsref/dom_obj_var.html" title="HTML DOM Variable วัตถุ"><tfoot></a></li> <li><a href="/th/jsref/dom_obj_video.html" title="HTML DOM Video วัตถุ"><th></a></li> </ul> <h2><thead></h2> <ul> <li><a href="/th/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration วัตถุ"><tr></a></li> <li><a href="/th/jsref/jsref_type_conversion.html" title="การแปลงประเภท JavaScript"><textarea></a></li> </ul> </div> <div><h3><center> <time> </center><h3> <h2><title></h2> <ul> <li><a href="/th/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><track></h1> <div class="btn-toref"> <a href="/th/jsref/dom_obj_event.html" title="Event HTML DOM">เหตุการณ์ DOM</a> <a href="/th/jsref/obj_focusevent.html" title="HTML DOM FocusEvent">FocusEvent</a> </div> <div> <h2><u></h2> <p><ul></p> <p class="tip"><span>CSSStyleDeclaration</span> <var> <a href="/th/jsref/event_onblur.html" title="เหตุการณ์ onblur">เหตุการณ์ onblur</a><video></p> <p class="tip"><span>CSSStyleDeclaration</span>คู่มืออ้างอิงอื่น ๆ</p> <p class="tip"><span>CSSStyleDeclaration</span> คำแนะนำ： <a href="/th/jsref/event_onfocusin.html" title="เหตุการณ์ onfocusin">เหตุการณ์ onfocusin</a>onfocusout รายการเหตุ</p> </div> <div> <h2>ตรงกันข้าม</h2> <h3>ตัวอย่าง</h3> <p>ตัวอย่าง 1</p> <pre class="language-html"> ปฏิบัติการ JavaScript ขณะกำลังสู่ข้อความที่จะสูญเสียฟอกซ์ </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=event_onfocusout">ลองทำด้วยตัวเอง</a></p> <p><input type="text" onfocusout="myFunction()"></p> </div> <div> <h2>หลังจากนั้นมีตัวอย่าง TIY มากมายในด้านล่างของหน้า</h2> <p>คำสั่ง</p> <pre class="language-html"> ใน HTML มี：<i><</i> element<i>.addEventListener("focusout",</i>onfocusout=" </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=event_onfocusout_html">ลองทำด้วยตัวเอง</a></p> <p>"></p> <pre class="language-js"> <i>ใน JavaScript ใช้ addEventListener() วิธี：</i>In JavaScript (อาจไม่ทำงานตามคาดหวังใน Chrome, Safari และ Opera 15+):<i>.addEventListener("focusout",</i>.onfocusout = function(){ </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=event_onfocusout_dom">ลองทำด้วยตัวเอง</a></p> <p>};</p> <pre class="language-js"> <i>ใน JavaScript ใช้ addEventListener() วิธี：</i>object <i>.addEventListener("focusout",</i>myScript </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=event_onfocusout_addeventlistener">ลองทำด้วยตัวเอง</a></p> <p class="note"><span>หมายเหตุ:</span>); <a href="/th/jsref/met_element_addeventlistener.html" title="เมธอด addEventListener() ของ HTML DOM">Internet Explorer 8 หรือตัวเก่ากว่าไม่สนับสนุน</a>addEventListener() วิธี</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="/th/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> <p>ตัวเลขในตารางหมายถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนเหตุการณ์นี้อย่างเต็มที่แรก。</p> <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>onfocusout</td> <td>สนับสนุน</td> <td>สนับสนุน</td> <td>52.0</td> <td>สนับสนุน</td> <td>สนับสนุน</td> </tr> </table> <p class="note"><span>หมายเหตุ:</span>เจาะจง: ในบางกรณี onfocusout อาจไม่ทำงานตามคาดหวังใน Chrome, Safari และ Opera 15+ อย่างเป็นทางการ แต่มันควรใช้เป็นคุณสมบัติ HTML และใช้วิธี addEventListener() (ดูตัวอย่างทางการใต้นี้).</p> </div> <div> <h2>ตัวอย่างเพิ่มเติม</h2> <h3>ตัวอย่าง 2</h3> <p>ใช้ "onfocusin" และ "onfocusout" ร่วมกัน:</p> <pre class="language-html"> <input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()"> </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=event_onfocusin_onfocusout">ลองทำด้วยตัวเอง</a></p> <h3>ตัวอย่าง 3</h3> <p>เหตุการณ์เลื่อนลง: ตั้งค่าปรากฏการณ์ addEventListener() ให้เป็น true (ใช้สำหรับ focus และ blur):</p> <pre class="language-html"> <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="/th/tiy/t.html?f=event_onfocus_eventdelegation">ลองทำด้วยตัวเอง</a></p> <h3>ตัวอย่าง 4</h3> <p>เหตุการณ์เลื่อนลงใช้ focusin ตามนี้:</p> <pre class="language-html"> <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="/th/tiy/t.html?f=event_onfocusin_eventdelegation">ลองทำด้วยตัวเอง</a></p> </div> <div class="btn-toref"> <a href="/th/jsref/dom_obj_event.html" title="Event HTML DOM">เหตุการณ์ DOM</a> <a href="/th/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="/th/jsref/index.html">คู่มืออ้างอิง JavaScript และ HTML DOM</a></h5> <h5 id="tools_example"><a href="/th/js/js_examples.html">ตัวอย่าง JavaScript</a></h5> <h5 id="tools_quiz"><a href="/th/js/js_quiz.html">แบบทดสอบ JavaScript</a></h5> <h5 id="tools_tutorial"><a href="/th/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="/th/about/index.html" title="เกี่ยวกับ CodeW3C.com">เกี่ยวกับ CodeW3C.com</a> <a href="/th/about/about_helping.html" title="ช่วยเหลือ CodeW3C.com">ช่วยเหลือ CodeW3C.com</a> <a href="/th/about/about_use.html" title="เกี่ยวกับการใช้งาน">ข้อตกลงใช้งาน</a> <a href="/th/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>