กิจกรรม onfocus ทำอะไรใน JavaScript

“ โฟกัส ” เหตุการณ์เป็นเหตุการณ์ที่มีชื่อเสียงซึ่งส่วนใหญ่ใช้ในขณะที่ทำงานกับฟอร์มใน JavaScript ทริกเกอร์เมื่อองค์ประกอบ HTML ที่เกี่ยวข้องได้รับการโฟกัส ใช้ได้กับองค์ประกอบ HTML ทุกประเภท ยกเว้น “”, “”, “ <base>”, “<style>”, “<head>”, “ <body>”, “<script> องค์ประกอบ ', ' <iframe>', '<meta>', ' <br>', ' <bdo>' และ '<param>' เหตุการณ์นี้คือ “ <strong> โฟกัส</strong> ” โดยทั่วไปจะใช้ในช่องอินพุต HTML สำหรับการตรวจสอบความถูกต้องของแบบฟอร์มทุกประเภท<p> โพสต์นี้จะอธิบายวัตถุประสงค์ การทำงาน และการใช้งานเหตุการณ์ “onfocus” ใน JavaScript</p> <h2> <strong> “เหตุการณ์ onfocus” ทำงานใน JavaScript อย่างไร</strong> </h2> <p> “ <strong> โฟกัส</strong> ” เหตุการณ์จะถูกเรียกใช้เมื่อองค์ประกอบ HTML เฉพาะเจาะจง นอกจากนี้ยังเรียกใช้การทำงานของฟังก์ชัน JavaScript ที่เกี่ยวข้อง</p><hr> <br /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4062866992167421" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4062866992167421" data-ad-slot="3660419154" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <hr><br /><div class="embeded-video"><iframe src="https://www.youtube.com/embed/ifozmR3-orI?modestbranding=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <br /> <p> <strong> ไวยากรณ์</strong> </p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="3"></ins><br /> องค์ประกอบ.<span class="me1"> โฟกัส</span> <span class="sy0"> =</span> การทำงาน<span class="br0"> (</span><span class="br0"> )</span><span class="br0"> {</span> มายสคริปต์<span class="br0"> }</span><span class="sy0"> ;</span> <p> ในไวยากรณ์ข้างต้น:</p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="4"></ins><br /> <ul> <li> <strong> องค์ประกอบ:</strong> มันแสดงถึงองค์ประกอบ HTML</li> <li> <strong> การทำงาน():</strong> หมายถึงฟังก์ชันที่ต้องเรียกใช้เมื่อทริกเกอร์เหตุการณ์</li> <li> <strong> มายสคริปต์:</strong> สอดคล้องกับข้อกำหนดของฟังก์ชันเพื่อดำเนินการเฉพาะเมื่อเหตุการณ์ 'โฟกัส' เกิดขึ้น</li> </ul> <h2> <strong> จะใช้ 'เหตุการณ์ onfocus' ใน JavaScript ได้อย่างไร</strong> </h2> <p> “ <strong> โฟกัส</strong> ” เหตุการณ์สามารถใช้ใน JavaScript ได้หลายวิธี ส่วนนี้แสดงตัวอย่างยุทธวิธีต่างๆ เพื่ออธิบายการใช้งาน</p><hr> <br /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4062866992167421" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4062866992167421" data-ad-slot="9858463164" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <hr> <h2> <strong> ตัวอย่างที่ 1: การทริกเกอร์</strong> “ <strong> เหตุการณ์ onfocus</strong> ” <strong> โดยการเปลี่ยนสีพื้นหลังของช่องป้อนข้อมูล</strong> </h2> <p> ตัวอย่างนี้ทริกเกอร์ “ <strong> โฟกัส</strong> ” เหตุการณ์โดยการเปลี่ยนสีพื้นหลังของฟิลด์ข้อความอินพุตด้วยความช่วยเหลือของฟังก์ชัน JavaScript ที่ผู้ใช้กำหนด</p> <h3> <strong> รหัส HTML</strong> </h3> <p> ประการแรก ภาพรวมของรหัส HTML ต่อไปนี้:</p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="5"></ins><br /> <span class="sy0"> <</span> ชั่วโมง2<span class="sy0"> ></span> โฟกัส <a href="https://www.google.com/search?hl=en&q=allinurl%3Adocs.oracle.com+javase+docs+api+event"><span class="kw3"> เหตุการณ์</span></a> ในจาวาสคริปต์<span class="sy0"> </</span> ชั่วโมง2<span class="sy0"> ></span> <br> <br> <span class="sy0"> <</span> หน้า<span class="sy0"> ></span> คลิกภายในช่องป้อนข้อมูลเพื่อรับโฟกัส<span class="br0"> (</span> โฟกัส<span class="br0"> )</span> .<span class="sy0"> </</span> หน้า<span class="sy0"> ></span> <br> <br> <a href="https://www.google.com/search?hl=en&q=allinurl%3Adocs.oracle.com+javase+docs+api+name"><span class="kw3"> ชื่อ</span></a> <span class="sy0"> :</span> <span class="sy0"> <</span> ประเภทอินพุต<span class="sy0"> =</span><span class="st0"> 'ข้อความ'</span> รหัส<span class="sy0"> =</span><span class="st0"> 'การสาธิต'</span> ตัวยึด<span class="sy0"> =</span><span class="st0"> 'ใส่ชื่อของคุณ'</span> โฟกัส<span class="sy0"> =</span><span class="st0"> 'ฟังก์()'</span><span class="sy0"> ></span> <p> ในรหัสด้านบน:</p> <ul> <li> “ <strong> <h2></strong> ” แท็กกำหนดหัวข้อย่อยและ “ <strong> <p></strong> ” แท็กสร้างย่อหน้าตามลำดับ</li> <li> หลังจากนั้น “ <strong> <อินพุต></strong> ” แท็กแทนฟิลด์ข้อความอินพุตมีป้ายกำกับว่า “ <strong> ชื่อ</strong> ”, ประเภทเนื้อหาเป็น “ <strong> ข้อความ</strong> ”, รหัสที่เกี่ยวข้องเป็น “ <strong> การสาธิต</strong> ” และตัวยึดตำแหน่งที่ระบุ</li> <li> นอกจากนี้ “ <strong> โฟกัส</strong> ” มีการระบุเหตุการณ์เพื่อเปลี่ยนเส้นทางไปยังฟังก์ชันชื่อ “ <strong> ฟังก์ชัน ()</strong> '.</li> </ul> <h3> <strong> รหัสจาวาสคริปต์</strong> </h3> <p> ถัดไป ทำตามรหัส JavaScript ที่ระบุด้านล่าง:</p> <span class="sy0"> <</span> สคริปต์<span class="sy0"> ></span> <br> <br> ฟังก์ชัน ฟังค์ชั่น<span class="br0"> (</span><span class="br0"> )</span> <span class="br0"> {</span> <br> <br> เอกสาร.<span class="me1"> getElementById</span><span class="br0"> (</span><span class="st0"> 'การสาธิต'</span><span class="br0"> )</span> .<span class="me1"> สไตล์</span> .<span class="me1"> พื้นหลัง</span> <span class="sy0"> =</span> <span class="st0"> 'สีชมพู'</span><span class="sy0"> ;</span> <br> <br> <span class="br0"> }</span> <br> <br> <span class="sy0"> </</span> สคริปต์<span class="sy0"> ></span> <p> ในบรรทัดโค้ดด้านบน:</p> <ul> <li> ฟังก์ชันที่ชื่อว่า “ <strong> ฟังก์ชัน ()</strong> ” ถูกกำหนด</li> <li> ในนิยามของฟังก์ชัน คำว่า “ <strong> document.getElementById()</strong> ” วิธีการดึงย่อหน้าผ่าน id และใช้ “ <strong> สไตล์.พื้นหลัง</strong> ' คุณสมบัติ.</li> <li> สีพื้นหลังของฟิลด์ข้อความอินพุตเปลี่ยนไปตามเหตุการณ์ เช่น ทริกเกอร์ “onfocus”</li> </ul> <p> <strong> เอาต์พุต</strong> </p> <p> <img class="wp-image-324017" src="https://softoban.com/img/other/AC/what-does-onfocus-event-do-in-javascript-1.gif"></p> <p> ผลลัพธ์ยืนยันว่าเมื่อ ' <strong> โฟกัส</strong> ” ทริกเกอร์เหตุการณ์ สีพื้นหลังของฟิลด์อินพุตที่กำหนดจะเปลี่ยนไปตามนั้น</p> <h2> <strong> ตัวอย่างที่ 2: การทริกเกอร์</strong> “ <strong> เหตุการณ์ onfocus</strong> ” <strong> ผ่านกล่องแจ้งเตือน</strong> </h2> <p> ในตัวอย่างนี้ กล่องแจ้งเตือนสามารถแสดงตามเหตุการณ์ เช่น “ <strong> โฟกัส</strong> ” ทริกเกอร์ผ่านฟังก์ชันที่ผู้ใช้กำหนด</p> <h3> <strong> รหัส HTML</strong> </h3> <p> ขั้นแรก ดูโค้ด HTML ต่อไปนี้:</p> <span class="sy0"> <</span> ชั่วโมง2<span class="sy0"> ></span> โฟกัส <a href="https://www.google.com/search?hl=en&q=allinurl%3Adocs.oracle.com+javase+docs+api+event"><span class="kw3"> เหตุการณ์</span></a> ในจาวาสคริปต์<span class="sy0"> </</span> ชั่วโมง2<span class="sy0"> ></span> <br> <br> <span class="sy0"> <</span> หน้า<span class="sy0"> ></span> คลิกด้านในจากช่องป้อนข้อมูลเพื่อรับโฟกัส<span class="br0"> (</span> โฟกัส<span class="br0"> )</span> .<span class="sy0"> </</span> หน้า<span class="sy0"> ></span> <br> <br> <a href="https://www.google.com/search?hl=en&q=allinurl%3Adocs.oracle.com+javase+docs+api+name"><span class="kw3"> ชื่อ</span></a> <span class="sy0"> :</span> <span class="sy0"> <</span> ประเภทอินพุต<span class="sy0"> =</span><span class="st0"> 'ข้อความ'</span> รหัส<span class="sy0"> =</span><span class="st0"> 'พาส1'</span> ตัวยึด<span class="sy0"> =</span><span class="st0"> 'ใส่ชื่อของคุณ'</span><span class="sy0"> ></span> <p> ในบล็อกรหัส HTML ด้านบน:</p> <ul> <li> ในทำนองเดียวกัน เพิ่มหัวข้อย่อยของระดับ 2 ผ่าน “ <strong> <h2></strong> ” แท็กและรวมย่อหน้าโดยใช้ “ <strong> <p></strong> ” แท็ก</li> <li> ในทำนองเดียวกัน ฟิลด์อินพุตจะถูกกำหนดผ่านป้ายกำกับที่ระบุ ประเภทเนื้อหา รหัส และตัวยึดตามลำดับ</li> </ul> <h3> <strong> รหัสจาวาสคริปต์</strong> </h3> <p> ตอนนี้ พิจารณารหัส JavaScript ต่อไปนี้:</p> <span class="sy0"> <</span> สคริปต์<span class="sy0"> ></span> <br> <br> เอกสาร.<span class="me1"> getElementById</span><span class="br0"> (</span><span class="st0"> 'พาส1'</span><span class="br0"> )</span> .<span class="me1"> โฟกัส</span> <span class="sy0"> =</span> การทำงาน<span class="br0"> (</span><span class="br0"> )</span> <span class="br0"> {</span> การสาธิต<span class="br0"> (</span><span class="br0"> )</span><span class="br0"> }</span><span class="sy0"> ;</span> <br> <br> การสาธิตฟังก์ชั่น<span class="br0"> (</span><span class="br0"> )</span> <span class="br0"> {</span> <br> <br> เตือน<span class="br0"> (</span><span class="st0"> 'ช่องป้อนข้อมูลได้รับการโฟกัส'</span><span class="br0"> )</span><span class="sy0"> ;</span> <br> <br> <span class="br0"> }</span> <br> <br> <span class="sy0"> </</span> สคริปต์<span class="sy0"> ></span> <p> ในข้อมูลโค้ดด้านบน:</p> <ul> <li> “ <strong> document.getElementById()</strong> ” วิธีการดึงฟิลด์อินพุตผ่าน id และเชื่อมโยงเหตุการณ์เช่น “ <strong> โฟกัส</strong> ” กับมัน</li> <li> มันเป็นเช่นนั้นที่ฟังก์ชั่น JavaScript “ <strong> การสาธิต()</strong> ” จะถูกเรียกใช้เมื่อทริกเกอร์เหตุการณ์และแสดง “ <strong> เตือน</strong> ” พร้อมระบุข้อความ</li> </ul> <p> <strong> เอาต์พุต</strong> </p> <p> <strong> <img class="wp-image-324018" src="https://softoban.com/img/other/AC/what-does-onfocus-event-do-in-javascript-2.gif"></strong> </p> <p> ในเอาต์พุตนี้ สังเกตได้ว่าเมื่อคลิกเมาส์ภายในช่องป้อนข้อมูล องค์ประกอบจะได้รับการโฟกัส และกล่อง 'แจ้งเตือน' จะปรากฏขึ้นเพื่อแสดงข้อความดังกล่าว</p> <h2> <strong> บทสรุป</strong> </h2> <p> JavaScript นำเสนอ “ <strong> โฟกัส</strong> ” เหตุการณ์ที่เรียกใช้เมื่อองค์ประกอบ HTML ที่เกี่ยวข้องย้ายเข้าไปข้างใน กล่าวคือ ได้รับโฟกัส มันเป็นสิ่งที่ตรงกันข้ามกับ “ <strong> เปิดภาพเบลอ</strong> ” เหตุการณ์ที่เกิดขึ้นเมื่อองค์ประกอบสูญเสียโฟกัส สามารถใช้เพื่อเรียกใช้ฟังก์ชัน JavaScript เพื่อทำงานที่ต้องการเมื่อถูกเรียกใช้ คู่มือนี้แสดงวัตถุประสงค์ การทำงาน และการใช้งานเหตุการณ์ “onfocus” ใน JavaScript</p> </article> <div class="d-flex justify-content-center"> <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script> <div class="pluso" data-background="transparent" data-options="big,round,line,horizontal,nocounter,theme=06" data-services="facebook,twitter,email,print"></div> </div> <div class="tag-widget post-tag-container mb-5 mt-5"> <div class="tagcloud"> <a href="/xun/" class="tag-cloud-link">อื่น</a> </div> </div> </div> </div> <div class="col-lg-4 sidebar ftco-animate bg-light pt-5"> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">หมวดหมู่</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">ราสเบอร์รี่ปี่</a> </li><li> <a href="/ethernet/">อีเธอร์เน็ต</a> </li><li> <a href="/other/">อื่น</a> </li><li> <a href="/nano/">นาโน</a> </li><li> <a href="/zoom/">ซูม</a> </li><li> <a href="/cinnamon/">อบเชย</a> </li><li> <a href="/reviews/">ความคิดเห็น</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">วิทยุ</a> </li><li> <a href="/minecraft/">มายคราฟ</a> </li><li> <a href="/ssh/">Ssh</a> </li><li> <a href="/openvas/">Openvas</a> </li><li> <a href="/compression/">การบีบอัด</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Aircrack</a> </li><li> <a href="/office-productivity-software/">ซอฟต์แวร์เพิ่มประสิทธิภาพการทำงานในสำนักงาน</a> </li><li> <a href="/boot/">Boot</a> </li><li> <a href="/system-calls/">การเรียกระบบ</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">เครือข่าย</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Gimp</a> </li><li> <a href="/plex/">เพล็กซ์</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">นักเทียบท่า</a> </li><li> <a href="/firewall/">ไฟร์วอลล์</a> </li><li> <a href="/wireshark/">Wireshark</a> </li><li> <a href="/synology/">Synology</a> </li><li> <a href="/pdf/">ไฟล์ Pdf</a> </li><li> <a href="/ethereum/">Ethereum</a> </li><li> <a href="/parrot-os/">นกแก้ว Os</a> </li><li> <a href="/sublime/">ประเสริฐ</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hyper-V</a> </li><li> <a href="/phone/">โทรศัพท์</a> </li><li> <a href="/kodi/">รหัส</a> </li><li> <a href="/gnome/">Gnome</a> </li><li> <a href="/manjaro/">อาหารอันโอชะ</a> </li><li> <a href="/mouse/">หนู</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Torrent</a> </li><li> <a href="/tablet/">ยาเม็ด</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Curl</a> </li><li> <a href="/kde/">ที่ไหน</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">แบบอักษร</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">ภาพ</a> </li><li> <a href="/usb/">ยูเอสบี</a> </li><li> <a href="/squid/">ปลาหมึก</a> </li><li> <a href="/mate/">เพื่อน</a> </li><li> <a href="/vlc-media-player/">Vlc Media Player</a> </li><li> <a href="/dns/">Dns</a> </li><li> <a href="/bitcoin/">Bitcoin</a> </li><li> <a href="/keyboard/">แป้นพิมพ์</a> </li><li> <a href="/inkscape/">อิงค์สเคป</a> </li><li> <a href="/encryption/">การเข้ารหัส</a> </li><li> <a href="/fedora/">Fedora</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">สแกนเนอร์</a> </li><li> <a href="/atom/">อะตอม</a> </li><li> <a href="/red-hat/">หมวกสีแดง</a> </li><li> <a href="/teamviewer/">Teamviewer</a> </li><li> <a href="/skype/">สไกป์</a> </li><li> <a href="/vpn/">Vpn</a> </li><li> <a href="/xfce/">Xfce</a> </li><li> <a href="/jupyter-notebook/">Jupyter Notebook</a> </li><li> <a href="/nfs/">Nfs</a> </li><li> <a href="/blog/">บล็อก</a> </li><li> <a href="/lvm/">Lvm</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">เครื่องเล่นสื่อ</a> </li><li> <a href="/posix/">โพซิกซ์</a> </li><li> <a href="/steam/">ไอน้ำ</a> </li><li> <a href="/jenkins/">เจนกินส์</a> </li><li> <a href="/power/">พลัง</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Netstat</a> </li><li> <a href="/kvm/">ตร.ม</a> </li><li> <a href="/bluetooth/">บลูทู ธ</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">กริป</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">โอดิสซี</a> </li><li> <a href="/audio/">เครื่องเสียง</a> </li><li> <a href="/cpu/">ซีพียู</a> </li><li> <a href="/tensorflow/">เทนเซอร์โฟลว์</a> </li><li> <a href="/autodesk/">Autodesk</a> </li><li> <a href="/lubuntu/">Lubuntu</a> </li><li> <a href="/llvm/">Llvm</a> </li><li> <a href="/windows/">Windows</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (รุ่นเก่า)</a> </li><li> <a href="/internet-explorer/">Internet Explorer</a> </li><li> <a href="/office/">สำนักงาน</a> </li><li> <a href="/xun/">อื่น</a> </li><li> <a href="/s-kip/">สไกป์</a> </li><li> <a href="/ra-s-bexr-ri-pi/">ราสเบอร์รี่ปี่</a> </li><li> <a href="/web-khaem/">เว็บแคม</a> </li><li> <a href="/kheruxng-len-sux/">เครื่องเล่นสื่อ</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/hae-phr-xk-si/">แฮพร็อกซี่</a> </li><li> <a href="/kha-phangphey/">คำพังเพย</a> </li><li> <a href="/but/">บูต</a> </li><li> <a href="/praserith/">ประเสริฐ</a> </li><li> <a href="/xu-bun-tu-24-04-cat/">อูบุนตู 24.04</a> </li><li> <a href="/neks-khla-wd/">เน็กซ์คลาวด์</a> </li><li> <a href="/khunthrrm/">คุณธรรม</a> </li><li> <a href="/usb-passthrough/">usb-passthrough</a> </li><li> <a href="/hmwk-fang/">หมวกฟาง</a> </li><li> <a href="/but-xyang-plxdphay/">#บูตอย่างปลอดภัย</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">โพสต์ยอดนิยม</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/fedora/3E/how-to-install-opencl-for-intel-gpu-on-fedora-40-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-tid-tang-opencl-sahrab-intel-gpu-bn-fedora-40">วิธีติดตั้ง OpenCL สำหรับ Intel GPU บน Fedora 40+</a> </h3> <div class="meta"> <div> <a href="/hmwk-fang/"><span class="icon-chat"></span> หมวกฟาง</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/8E/what-are-operators-and-their-types-in-c-programming-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/xari-khux-taw-danein-kar-laea-prapheth-khxng-phwk-khea-ni-kar-kheiyn-porkaerm-c">อะไรคือตัวดำเนินการและประเภทของพวกเขาในการเขียนโปรแกรม C</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/1C/how-to-install-jami-on-linux-mint-21-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-kar-tid-tang-jami-bn-linux-mint-21">วิธีการติดตั้ง Jami บน Linux Mint 21</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/AA/how-to-create-adaptive-images-with-css-flexbox-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-srang-rupphaph-thi-prab-peliyn-di-dwy-css-flexbox">วิธีสร้างรูปภาพที่ปรับเปลี่ยนได้ด้วย CSS Flexbox</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/7F/2-ways-to-install-raspberry-pi-os-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/2-withi-ni-kar-tid-tang-raspberry-pi-os">2 วิธีในการติดตั้ง Raspberry Pi OS</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/C3/how-to-enable-virtualization-in-windows-10-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-peid-chi-ngankar-calxng-semuxn-ni-windows-10">วิธีเปิดใช้งานการจำลองเสมือนใน Windows 10</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/D8/how-to-uninstall-java-from-ubuntu-22-04-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-thxn-kar-tid-tang-java-cak-ubuntu-22-04">วิธีถอนการติดตั้ง Java จาก Ubuntu 22.04</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/14/how-to-reload-a-page-using-javascript-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-hold-hna-him-doy-chi-javascript">วิธีโหลดหน้าใหม่โดยใช้ JavaScript</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/8C/what-is-aws-docker-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/aws-docker-khux-xari">AWS Docker คืออะไร</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/A8/what-is-applocker-on-windows-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/applocker-bn-windows-khux-xari">AppLocker บน Windows คืออะไร</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/02/how-to-remove-gutter-space-for-a-specific-div-in-bootstrap-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-lb-gutter-space-sahrab-div-chephaa-ni-bootstrap">วิธีลบ Gutter Space สำหรับ div เฉพาะใน Bootstrap</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/8C/what-are-the-steps-to-rename-a-file-in-git-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/khan-txn-ni-kar-peliyn-chux-fil-ni-git-khux-xari">ขั้นตอนในการเปลี่ยนชื่อไฟล์ใน Git คืออะไร</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/DC/how-to-install-snort-on-ubuntu-22-04-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-kar-tid-tang-snort-bn-ubuntu-22-04">วิธีการติดตั้ง Snort บน Ubuntu 22.04</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/A4/the-perl-bless-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/fang-kchan-perl-bless">ฟังก์ชั่น Perl Bless</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/8A/what-are-variables-in-c-programming-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/tawpaer-ni-kar-kheiyn-porkaerm-phas-a-si-khux-xari">ตัวแปรในการเขียนโปรแกรมภาษาซีคืออะไร</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/0D/what-is-the-8220-hasclass-8221-function-with-plain-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/fang-kchan-hasclass-dwy-javascript-thrrmda-khux-xari">ฟังก์ชั่น 'hasClass' ด้วย JavaScript ธรรมดาคืออะไร</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/A0/how-to-get-current-year-in-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/withi-rab-pi-paccuban-ni-javascript">วิธีรับปีปัจจุบันใน JavaScript</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/C2/best-raspberry-pi-robots-kits-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/chud-hun-ynt-raspberry-pi-thi-di-thisud">ชุดหุ่นยนต์ Raspberry Pi ที่ดีที่สุด</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/C7/is-arduino-a-microcontroller-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/arduino-pen-mikhor-khxnthorllexr-hrux-mi">Arduino เป็นไมโครคอนโทรลเลอร์หรือไม่?</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/3F/what-is-subnet-on-aws-vpc-and-how-to-use-it-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/subnet-bn-aws-vpc-khux-xari-laea-chi-ngan-xyangri">Subnet บน AWS VPC คืออะไรและใช้งานอย่างไร</a> </h3> <div class="meta"> <div> <a href="/xun/"><span class="icon-chat"></span> อื่น</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div>  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div> <script src="https://softoban.com/template/js/jquery.min.js"></script> <script src="https://softoban.com/template/js/jquery-migrate-3.0.1.min.js"></script> <script src="https://softoban.com/template/js/popper.min.js"></script> <script src="https://softoban.com/template/js/bootstrap.min.js"></script> <script src="https://softoban.com/template/js/jquery.easing.1.3.js"></script> <script src="https://softoban.com/template/js/jquery.waypoints.min.js"></script> <script src="https://softoban.com/template/js/jquery.stellar.min.js"></script> <script src="https://softoban.com/template/js/owl.carousel.min.js"></script> <script src="https://softoban.com/template/js/jquery.magnific-popup.min.js"></script> <script src="https://softoban.com/template/js/aos.js"></script> <script src="https://softoban.com/template/js/jquery.animateNumber.min.js"></script> <script src="https://softoban.com/template/js/scrollax.min.js"></script> <script src="https://softoban.com/template/js/main.js"></script> <script async="" defer="" src="//www.instagram.com/embed.js"></script> <script async="" src="https://platform.twitter.com/widgets.js"></script> <script> window.onload = function(){ for(i in document.images) { if(document.images[i].naturalWidth==0){ if(window.location.pathname.length > 1){ document.images[i].style="display:none" } else { document.images[i].src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" } } } } $(document).ready(() => { $('nav').find('a').each(function(){ if($(this).attr('href') == window.location.pathname){ $(this).parent('li').addClass('active') } }) var wrapper = '<div class="embeded-video"></div>'; if($('iframe[width="560"]').length > 1){ $('.m_v').remove(); }else{ } $('iframe[src^="https://www.youtube.com/embed/"]').wrap(wrapper); let loc = window.location.pathname; if(loc == '/privacy-policy'){ $('div.embeded-video').remove(); $('blockquote').remove(); } }) </script> <script type="text/javascript" src="https://s.skimresources.com/js/192355X1670518.skimlinks.js"></script></body> </html>