รหัสการใช้งานของตัวยึดตำแหน่งของ HTML5 (เช่นเข้ากันได้) รหัสการใช้งาน

ตัวยึดตำแหน่งเป็นอีกคุณลักษณะที่เพิ่มเข้ามาใน HTML5 เมื่ออินพุตหรือ textarea ตั้งค่าแอตทริบิวต์นี้เนื้อหาของค่านี้จะแสดงในกล่องข้อความเป็นพรอมต์คำสีเทา เมื่อกล่องข้อความได้รับโฟกัสข้อความพร้อมท์จะหายไป ในอดีตเอฟเฟกต์นี้ทำได้โดยใช้ JavaScript เพื่อควบคุม Firefox, Google Chrome ฯลฯ แสดงการสนับสนุน แต่เช่นไม่สนับสนุน

HTML5 ได้ทำการปรับปรุงจำนวนมากในรูปแบบเว็บเช่นประเภทประเภทใหม่ของอินพุตการตรวจสอบรูปแบบ ฯลฯ

ตัวยึดตำแหน่งเป็นอีกคุณลักษณะที่เพิ่มเข้ามาใน HTML5 เมื่ออินพุตหรือ textarea ตั้งค่าแอตทริบิวต์นี้เนื้อหาของค่านี้จะแสดงในกล่องข้อความเป็นพรอมต์คำสีเทา เมื่อกล่องข้อความได้รับโฟกัสข้อความพร้อมท์จะหายไป ในอดีตฉันใช้ JavaScript เพื่อควบคุมเอฟเฟกต์นี้เพื่อให้ได้มัน Firefox, Google Chrome ฯลฯ แสดงการสนับสนุน แต่เช่นรู้สึกไม่สอดคล้องกัน!

ตัวอย่างเช่น: <อินพุต id = t1 type = text placeholder = โปรดป้อนข้อความ/

สิ่งนี้แนะนำปลั๊กอินแอตทริบิวต์ที่ทรงพลังซึ่งรองรับตัวยึดตำแหน่งภายใต้ IE และยังเข้ากันได้กับเบราว์เซอร์อื่น ๆ ที่ไม่สนับสนุนตัวยึดตำแหน่ง รหัสมีดังนี้:

 $ (document) .ready (function () {var doc = เอกสาร, อินพุต = doc.getElementByTagname ('อินพุต'), supportplaceholder = 'placeholder'in doc.createElement (' อินพุต '), placeHolder = ฟังก์ชั่น (อินพุต) {var text = input.getAttribute ( input.value = text} input.onfocus = function () {if (input.value === ข้อความ) {this.value = ''}}; i = 0, len = inputs.length; i <len; i ++) {var input = inputs [i], text = input.getAttribute ('placeholder');

เพียงคัดลอกรหัสและบันทึกลงในการอ้างอิงไฟล์ JS โดยไม่มีการประมวลผลใด ๆ มันสะดวกมาก!

ตัวอย่าง: สิ่งนี้สามารถทำให้การป้อนข้อมูล IE แสดงแอตทริบิวต์ตัวยึดได้ แต่ก็โอเคถ้ามีอินพุตเพียงครั้งเดียวในหน้า หากมีหลายอินพุตหากอินพุตไม่กรอกค่าใด ๆ อินพุตที่ว่างเปล่าของมันจะเติมค่าตัวยึดตำแหน่งโดยอัตโนมัติลงในค่าส่งผลให้เกิดข้อผิดพลาด ตัวอย่างเช่น:

 <ประเภทอินพุต = text placeholder = อินพุตผลิตภัณฑ์เข้ารหัสชื่อ = goodsCode id = ค่า goodsCode = 123 /> <ประเภทอินพุต = text placeholder = ชื่อผลิตภัณฑ์อินพุต = goodsName id = ค่าสินค้าชื่อ = ชื่อผลิตภัณฑ์อินพุต />

ทางออกคือการตัดสินด้วยตัวเองในพื้นหลัง อาจจะสามารถแก้ไขได้ในไฟล์ JS ด้านบนและค้นคว้าในภายหลัง ~!