ฐานข้อมูล localStorage ของ HTML5 มีขีดจำกัดขนาด ขนาดมาตรฐานคือ 5 หรือ 10 MB ต่อโดเมน ขีดจำกัด 5 MB ต่อ origin แนะนำ ระบุไว้ดังนี้: User agents should guard against sites storing data under their origins other affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com, a3.examp

เมื่อฟอร์มถูกส่ง ให้จับกระบวนการส่งและลองรันโค้ดสนิปเพ็ตต่อไปนี้สำหรับอัปโหลดไฟล์: // File 1 var myFile = document.getElementById(fileBox).files[0]; var reader = new FileReader(); reader.readAsText(file, UTF-8); reader.onload = myFunc; function myFunc(event) { var res = event.target.result; var

ใช้โค้ดต่อไปนี้เพื่อตรวจสอบว่าเสียงกำลังเล่นอยู่หรือไม่: function isPlaying(audelem) { return !audelem.paused; } โค้ดด้านบนใช้ตรวจสอบว่าเสียงกำลังเล่นหรือไม่ แท็ก audio มีคุณสมบัติ paused คุณสมบัติ paused คืนค่าว่า audio/video ถูกหยุดชั่วคราวหรือไม่ คุณยังสามารถ toggle ได้: 0 && !newAudio.ended)

องค์ประกอบที่วาดใน canvas element ไม่มี representation มีเพียงพิกเซลที่ใช้และสีของมัน การวาดบน canvas element หมายถึงการวาด bitmap ใน immediate mode เพื่อรับ click event บน canvas element (รูปทรง) คุณต้องจับ click events บน canvas HTML element และกำหนดว่าองค์ประกอบไหนถูกคลิก ต้องเก็บความกว้างและควา

ใช้เมธอด toDataURL() เพื่อได้ URL ข้อมูลรูปภาพของ canvas มันแปลงการวาด (canvas) ให้เป็น URL เข้ารหัส 64-bit PNG ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อบันทึก canvas เป็นรูปภาพ: <!DOCTYPE HTML> <html> <head> </head> <body> <canvas id=newCanvas width=450 height=300

ก่อน HTML5 การตรวจสอบขนาดไฟล์ฝั่ง Client ต้องใช้ Flash แต่ปัจจุบันสามารถใช้ File API ได้โดยตรง ไม่ต้องพึ่งปลั๊กอินภายนอก หลักการทำงาน เมื่อผู้ใช้เลือกไฟล์ผ่าน <input type=file> เบราว์เซอร์จะสร้าง FileList object ซึ่งแต่ละไฟล์เป็น File object ที่มี property size (หน่วยเป็น bytes) ตัวอย่างโค้ด

คุณอาจเคยเห็นว่าเมื่อเปิด dropdown แล้วคลิกที่อื่น dropdown จะปิด ด้วยโค้ดด้านล่าง เมนู dropdown จะคงอยู่เปิดหลังคลิก: $(#myDropdown).on(hide.bs.dropdown, function () { return false; }); อีกวิธีคือจัดการ click event: click event สามารถจัดการได้โดยใช้โค้ดต่อไปนี้ เมธอด event.stopPropagation() หยุด

สามารถเปลี่ยนสีข้อความได้โดยขึ้นอยู่กับความสว่างเฉลี่ยของพิกเซลที่ถูกครอบคลุมของสีพื้นหลังของ parent โดยใช้โค้ดสนิปเพ็ตต่อไปนี้: 125) ? black : white; // for background var b = rgb( + rgb[0] + , + rgb[1] + , + rgb[2] + ); $(#box).css(color, f); $(#box).css(background-color, b); } <scrip

เมธอด fillText() วาดข้อความที่เติมสีบน canvas หากคุณต้องการขึ้นบรรทัดใหม่ สามารถทำได้โดยแยกข้อความที่ขึ้นบรรทัดใหม่และเรียก fillText() หลายครั้ง ด้วยวิธีนี้ คุณกำลังแยกข้อความเป็นบรรทัดและวาดแต่ละบรรทัดแยกกัน ลองรันโค้ดสนิปเพ็ตด้านล่าง: var c = $(#c)[0].getContext(2d); c.font = 12px Courier; alert(

h1 คือหัวข้อ (heading) ไม่ใช่หัวเรื่อง (title) คุณสามารถให้หัวข้อเฉพาะตัวแต่ละ sectioning element ได้ h1 ไม่สามารถเป็น title ได้ มันสามารถเป็นหัวข้อของส่วนนั้นๆ ของหน้าเว็บ แต่ละ article สามารถมี title ของตัวเองได้ <h1> กำหนดหัวข้อที่สำคัญที่สุด <h1> แรกถือเป็นฉลากสำหรับเอกสารทั้งหมด ใช

เพิ่มโค้ดสนิปเพ็ตต่อไปนี้ในคุณสมบัติของภาพ เพื่อป้องกันไม่ให้ภาพถูกลากและเลือก: img { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } เมื่อดับเบิลคลิกที่ข้อความหรือภาพ จะถูกไฮไลท์ (เลือก) คุณสมบัติ

คุณสมบัติ allowsInlineMediaPlayback ของ UIWebView เปิด/ปิดการเล่นสื่อแบบ inline ในเบราว์เซอร์เว็บ iOS สำหรับ native app โดยค่าเริ่มต้นบน iPhone ตั้งเป็น NO แต่บน iPad ตั้งเป็น YES ดังนั้น native video player จะครอบครองหน้าจอ ทำให้เราไม่สามารถเล่นเนื้อหาไดนามิกอื่นๆ พร้อมกับวิดีโอได้ ปรับพฤติกรรมนี้

เพื่อจัดตำแหน่ง canvas ให้อยู่กลางใน HTML5 ให้รวมแท็ก canvas ไว้ในแท็ก div จากนั้นจัดตำแหน่ง div ให้อยู่กลาง ด้วยวิธีนี้ canvas ก็จะอยู่กลางเช่นกัน ตัวอย่าง <!DOCTYPE html>. <html> <body> <div style=text-align:center;> <canvas style=background-color:GREEN;>

เบราว์เซอร์ทุกตัวจำกัดความกว้าง ความสูง และพื้นที่ขององค์ประกอบ canvas สำหรับ Google Chrome ความกว้างและความสูงสูงสุดคือ 32,767 พิกเซล และพื้นที่สูงสุดคือ 268,435,456 พิกเซล สำหรับ Firefox ความกว้างและความสูงสูงสุดคือ 32,767 พิกเซล และพื้นที่สูงสุดคือ 472,907,776 พิกเซล สำหรับ IE ความกว้างและความสู

การวาดข้อความใน canvas ด้วย typeface ที่โหลดผ่าน @font-face ไม่แสดงข้อความถูกต้องครั้งแรก เนื่องจากเบราว์เซอร์ยังโหลดฟอนต์จากเครือข่ายไม่เสร็จ จึงใช้ฟอนต์ที่มีอยู่แล้วแทน ฟอนต์ต้องโหลดเสร็จสมบูรณ์ก่อนจึงจะใช้ได้ สามารถรับรองได้โดยใช้แท็ก <div> หากคุณต้องการให้แน่ใจว่าฟอนต์พร้อมใช้งานและมีองค์

เมธอด getItem(key) รับค่าพารามิเตอร์หนึ่งตัวและคืนค่าที่เชื่อมโยงกับคีย์ คีย์ที่กำหนดจะอยู่ในรายการที่เชื่อมโยงกับอ็อบเจกต์ if(localStorage.getItem(user) === null) { // ... } แต่ถ้าคีย์ไม่อยู่ในรายการ จะส่งค่า null กลับมาโดยใช้โค้ดด้านล่าง คุณยังสามารถทำตามขั้นตอนด้านล่างได้: if(user in localStor

แท็ก audio ของ HTML5 สามารถจัดสไตล์ได้ โดยใช้แท็ก audio พร้อมแอตทริบิวต์ controls จะใช้ player เริ่มต้นของเบราว์เซอร์ คุณสามารถปรับแต่งได้โดยไม่ใช้ controls ของเบราว์เซอร์ โดยการลบแอตทริบิวต์ controls คุณสามารถซ่อน UI ของเบราว์เซอร์ที่สร้างมา: <audio id=player src=kalimba.mp3></audio> &

คุณสามารถบอกเบราว์เซอร์ให้ไม่แคชหน้าเว็บของคุณได้โดยใช้ meta tags ต่อไปนี้: <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <meta http-equiv=pragma content=no-cache> นอกจากนี้ ลองทำดังนี้: เพิ่มพารามิเตอร์/สตริงต่อท้ายชื่อไฟล์ในแท็ก script เปลี

แอตทริบิวต์ crossOrigin อนุญาตให้ภาพที่โหลดจากต้นทางภายนอก (external origins) ถูกใช้ใน canvas เหมือนกับที่โหลดจากต้นทางปัจจุบัน การใช้ภาพโดยไม่มีการอนุมัติ CORS จะทำให้ canvas ถูกปนเปื้อน (taint) เมื่อ canvas ถูกปนเปื้อนแล้ว คุณจะไม่สามารถดึงข้อมูลกลับออกจาก canvas ได้อีก การโหลด canvas จากโดเมน cr

ใช้ไลบรารี JavaScript excanvas เพื่อใช้ HTML5 canvas ใน Internet Explorer (IE) ไลบรารี excanvas เป็นส่วนเสริม (add-on) ที่จะเพิ่มฟังก์ชัน HTML5 canvas ให้กับเบราว์เซอร์ IE เก่า (IE7-8) Firefox, Safari และ Opera 9 รองรับแท็ก canvas เพื่ออนุญาตการวาดภาพ 2D แบบคำสั่ง ExplorerCanvas นำฟังก์ชันเดียวกันไ