HTML5 ได้ทำการปรับปรุงจำนวนมากในรูปแบบเว็บเช่นประเภทประเภทใหม่ของอินพุตการตรวจสอบความถูกต้องของฟอร์ม ฯลฯ ตัวยึดตัวยึดเป็นอีกหนึ่งแอตทริบิวต์ที่เพิ่มเข้ามาใน HTML5 เมื่ออินพุตหรือ textarea ตั้งค่าแอตทริบิวต์นี้เนื้อหาของค่านี้จะแสดงในกล่องข้อความเป็นพรอมต์คำสีเทา เมื่อกล่องข้อความได้รับโฟกัสข้อความพร้อมท์จะหายไป ในอดีตเพื่อให้ได้เอฟเฟกต์นี้ JavaScript ถูกใช้เพื่อควบคุม:
เนื่องจากตัวยึดตำแหน่งเป็นคุณลักษณะใหม่จึงมีเบราว์เซอร์เพียงไม่กี่ตัวเท่านั้นที่รองรับ วิธีตรวจสอบว่าเบราว์เซอร์รองรับได้หรือไม่? (สามารถเข้าถึงการตรวจจับคุณสมบัติ HTML5/CSS3 เพิ่มเติมได้)
ฟังก์ชั่น hasplaceholdersupport () {
return 'placeholder' ใน document.createelement ('อินพุต');
-
ข้อความพรอมต์เริ่มต้นเป็นสีเทาและรูปแบบข้อความสามารถเปลี่ยนแปลงได้ผ่าน CSS:
/ * ทั้งหมด */::-webkit-input-placeholder {color:#f00; } อินพุต: -moz-placeholder {color:#f00; } / * บุคคล: WebKit * /#field2 ::-WebKit-input-placeholder {color:#00f; }#field3 ::-webkit-input-placeholder {color:#090; ความเป็นมา: LightGreen; การเปลี่ยนข้อความ: ตัวพิมพ์ใหญ่; }#field4 ::-webkit-input-placeholder {รูปแบบฟอนต์: ตัวเอียง; การตกแต่งข้อความ: Overline; ระยะห่างจดหมาย: 3px; สี:#999; } / * บุคคล: mozilla * /#field2: -moz-placeholder {color:#00f; }#field3: -moz-placeholder {color:#090; ความเป็นมา: LightGreen; การเปลี่ยนข้อความ: ตัวพิมพ์ใหญ่; }#field4: -moz-placeholder {รูปแบบฟอนต์: italic; การตกแต่งข้อความ: Overline; ระยะห่างจดหมาย: 3px; สี:#999; -เข้ากันได้กับเบราว์เซอร์อื่น ๆ ที่ไม่สนับสนุนตัวยึดตำแหน่ง:
var placeholder = {
_support: (ฟังก์ชัน () {
return 'placeholder' ใน document.createelement ('อินพุต');
-
// รูปแบบของข้อความแจ้งจะต้องกำหนดในสถานที่อื่น ๆ ในหน้า
ClassName: 'ABC',
init: function () {
if (! placeholder._support) {
// textarea ยังไม่ได้รับการประมวลผลเพิ่มสิ่งที่คุณต้องทำ
var inputs = document.getElementsByTagname ('อินพุต');
placeholder.create (อินพุต);
-
-
สร้าง: ฟังก์ชั่น (อินพุต) {
อินพุต var;
if (! inputs.length) {
อินพุต = [อินพุต];
-
สำหรับ (var i = 0, length = inputs.length; i <length; i ++) {
อินพุต = อินพุต [i];
if (! placeholder._support && input.attributes && input.attributes.placeholder) {
placeholder._setValue (อินพุต);
input.addeventListener ('โฟกัส', ฟังก์ชั่น (e) {
if (this.value === this.attributes.placeholder.nodevalue) {
this.value = '';
this.className = '';
-
}, เท็จ);
input.addeventListener ('Blur', function (e) {
if (this.value === '') {
placeholder._setValue (นี่);
-
}, เท็จ);
-
-
-
_setValue: ฟังก์ชั่น (อินพุต) {
input.value = input.attributes.placeholder.nodevalue;
input.className = placeholder.className;
-
-
// เริ่มต้นอินพุตทั้งหมดเมื่อเริ่มต้นหน้าเว็บ
//placeholder.init ();
// หรือตั้งค่าองค์ประกอบแยกกัน
//placeholder.create(document.getElementById('T1 '));