ความคิดเห็น: เบราว์เซอร์ได้เปิดตัวคุณสมบัติ HTML5 มากมาย หนึ่งในรายการโปรดของฉันคือการแนะนำแอตทริบิวต์ตัวยึดสำหรับองค์ประกอบอินพุต แอตทริบิวต์ Placeholder จะแสดงข้อความคู่มือจนกว่ากล่องอินพุตจะได้รับโฟกัสอินพุต เมื่อผู้ใช้ป้อนเนื้อหาเนื้อหาคู่มือจะถูกซ่อนไว้โดยอัตโนมัติ
ที่อยู่เดิม: คุณลักษณะตัวยึดตำแหน่งของ HTML5ที่อยู่สาธิต: ตัวยึดตำแหน่ง
วันที่ดั้งเดิม: 9 สิงหาคม 2010
วันที่แปล: 6 สิงหาคม 2556
เบราว์เซอร์แนะนำคุณสมบัติ HTML5 จำนวนมาก: บางตัวใช้ HTML บางตัวอยู่ในรูปแบบของ JavaScript APIs แต่พวกเขาทั้งหมดมีประโยชน์มาก หนึ่งในรายการโปรดของฉันคือการแนะนำแอตทริบิวต์ตัวยึดสำหรับองค์ประกอบอินพุต
คุณสมบัติของตัวยึดแสดงข้อความคู่มือจนกว่ากล่องอินพุตจะได้รับโฟกัสอินพุต เมื่อผู้ใช้ป้อนเนื้อหาเนื้อหาคู่มือจะถูกซ่อนไว้โดยอัตโนมัติ คุณเคยเห็นเทคนิคนี้ที่ใช้ใน JavaScript หลายพันครั้ง แต่การสนับสนุนดั้งเดิมจาก HTML5 นั้นดีกว่า
รหัส HTML มีดังนี้:
<อินพุต type = "text" plessholder = "โปรดป้อนที่อยู่ถาวร ... ">
สิ่งที่คุณต้องทำคือเพิ่มโดเมนตัวยึดและเนื้อหาข้อความที่มีไกด์และไม่จำเป็นต้องใช้สคริปต์ JavaScript เพิ่มเติมเพื่อให้ได้เอฟเฟกต์นี้ มันไม่ดีเหรอ?
การสนับสนุนการทดสอบตัวยึดตำแหน่ง
(โปรดทราบว่านี่เป็นบทความตั้งแต่ปี 2010 จนถึงขณะนี้ในปี 2013 เบราว์เซอร์กระแสหลักควรได้รับการสนับสนุน)
เนื่องจากตัวยึดตำแหน่งเป็นคุณสมบัติใหม่จึงจำเป็นต้องทดสอบการสนับสนุนเบราว์เซอร์ รหัส JS มีดังนี้:
// สร้างองค์ประกอบอินพุตใน JS และพิจารณาว่าองค์ประกอบมีแอตทริบิวต์ที่เรียกว่าตัวยึดตำแหน่ง
// ถ้าเบราว์เซอร์รองรับคุณสมบัตินี้จะมีอยู่ใน DOM ที่อ้างอิงใน JS
ฟังก์ชั่น hasplaceholdersupport () {
var input = document.createElement ('input');
return ('placeholder' ในอินพุต);
-
หากเบราว์เซอร์ไม่รองรับคุณสมบัติตัวยึดคุณต้องใช้กลยุทธ์ทางเลือกในการจัดการเช่น Mootools, Dojo หรือเครื่องมือ JavaScript อื่น ๆ (ตอนนี้โดโจสามารถใช้งานได้น้อยลงและอีกมากมายในประเทศจีนคือ jQuery และ extjs)
แน่นอน/* รหัส jQuery อย่าลืมแนะนำ jQuery Library*//
$ (function () {
if (! Hasplaceholdersupport ()) {
// รับองค์ประกอบที่อยู่
var $ address = $ ("input [name = 'address']");
ตัวยึด = $ address.attr ("ตัวยึด");
// ผูกเหตุการณ์โฟกัส
$ address.bind ('โฟกัส', function () {
if (placeholder == $ address.val ()) {
$ address.val ('');
-
-
// เหตุการณ์ที่หายไป
$ address.bind ('Blur', function () {
if ('' == $ address.val ()) {
$ address.val (ตัวยึด);
-
-
-
-
ตัวยึดตำแหน่งเป็นอีกหนึ่งทรัพย์สินเพิ่มเติมที่ยอดเยี่ยมสำหรับเบราว์เซอร์ในการแทนที่ตัวอย่าง JS คุณสามารถแก้ไขสไตล์ตัวยึดของ HTML5 ได้
รหัสทั้งหมดมีดังนี้:
<! doctype html>
<html>
<head>
<title> การสาธิตแอตทริบิวต์ตัวยึดตำแหน่ง HTML5 </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "Original = http: //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script>
// สร้างองค์ประกอบอินพุตใน JS และพิจารณาว่าองค์ประกอบมีแอตทริบิวต์ที่เรียกว่าตัวยึดตำแหน่ง
// ถ้าเบราว์เซอร์รองรับคุณสมบัตินี้จะมีอยู่ใน DOM ที่อ้างอิงใน JS
ฟังก์ชั่น hasplaceholdersupport () {
var input = document.createElement ('input');
return ('placeholder' ในอินพุต);
-
แน่นอน/* รหัส jQuery อย่าลืมแนะนำ jQuery Library*//
$ (function () {
if (! Hasplaceholdersupport ()) {
// รับองค์ประกอบที่อยู่
var $ address = $ ("input [name = 'address']");
ตัวยึด = $ address.attr ("ตัวยึด");
// ผูกเหตุการณ์โฟกัส
$ address.bind ('โฟกัส', function () {
if (placeholder == $ address.val ()) {
$ address.val ('');
-
-
// เหตุการณ์ที่หายไป
$ address.bind ('Blur', function () {
if ('' == $ address.val ()) {
$ address.val (ตัวยึด);
-
-
-
-
</script>
</head>
<body>
<div>
<form method = "post" action = "">
<อินพุต type = "text" plessholder = "โปรดป้อนที่อยู่ถาวร ... ">
<input type = "submit" value = "test">
</form>
</div>
</body>
</html>