บทความนี้มีพื้นฐานมาจากสิ่งต่อไปนี้ - ฉันกำลังทำการปรับเปลี่ยนและแก้ไขบทความนั้น เปลี่ยนลำดับเพื่อความชัดเจนและชัดเจน และยังเสนอตัวอย่างที่ใช้งานจริงด้วย ดังนั้น.

เทคนิคที่นำเสนอทั้งหมดแบ่งออกเป็นสามกลุ่ม: " การตั้งค่าพื้นฐาน, "ขยายโอกาสด้วย โดยใช้ jQuery" และ "การแก้ปัญหาข้อความหายไปเมื่อคลิก" มาเริ่มกันตามลำดับ

การตั้งค่าพื้นที่ข้อความพื้นฐาน

ลองดูที่ภาพหน้าจอ มันแสดงถึงฟิลด์ textarea ที่ใช้งานอยู่ ( เบราว์เซอร์ Googleโครม) เรากำจัดข้อบกพร่องบางประการออกไปในระดับหนึ่งหรืออย่างอื่น

ความสามารถในการขยายด้วย jQuery

$("textarea").ปรับขนาดอัตโนมัติ();

เพิ่มมุมเพื่อปรับขนาดพื้นที่ข้อความ สิ่งนี้ไม่เพียงต้องการ jQuery เท่านั้น แต่ยังรวมถึง jQuery UI ด้วย โดยส่วนตัวแล้วโลชั่นนี้ไม่ได้ผลเพียงพอสำหรับฉัน บางทีฉันควรจะลองอย่างอื่น เวอร์ชัน jQuery UI

$("textarea").ปรับขนาดได้();

แก้ไขปัญหาข้อความหายไปในพื้นที่ข้อความเมื่อคลิก

โซลูชัน HTML5 เป็นตัวยึดตำแหน่ง คุณลักษณะนี้ใน HTML5 จะเพิ่มข้อความสีเทาอ่อนลงในช่องข้อความพื้นที่ข้อความ (ซึ่งเกี่ยวข้องกับการป้อนข้อความด้วย) ที่จะหายไปเมื่อคุณคลิกที่พื้นที่นั้น หากปล่อยว่างไว้และคุณทำให้ไม่มีการใช้งาน ข้อความนั้นจะปรากฏขึ้นอีกครั้ง ใช้งานได้ใน Safari 5, Mobile Safari, Chrome 6 และ Firefox 4 alpha

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

โฟกัส(ฟังก์ชั่น() ( $(นี้).css("พื้นหลัง", "ไม่มี") ))
.blur(function() ( if ($(this).value == "") ( $(this).css("พื้นหลัง", "url(image.png) ไม่ทำซ้ำ") ) ));

เราเปลี่ยนเนื้อหาของพื้นที่ข้อความโดยการคลิก - อะนาล็อกของตัวยึดตำแหน่งใน jQuery มันค่อนข้างง่ายที่จะทำ

$("#ตัวอย่างสาม")
.data("ShuBlog!", $("#example-three").text())
.css("สี", "ff9900")
.โฟกัส(ฟังก์ชั่น() (
var $el = $(นี่);
ถ้า (this.value == $el.data("ShuBlog!")) (
นี้.value = "";
}
})
.เบลอ(ฟังก์ชั่น() (
ถ้า (this.value == "") (
this.value = $(this).data("ShuBlog!");
}
});

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

ฟังก์ชั่น elementSupportsAttribute (องค์ประกอบ, คุณลักษณะ) (
การทดสอบ var = document.createElement(องค์ประกอบ);
ถ้า (แอตทริบิวต์ในการทดสอบ) (
กลับเป็นจริง;
) อื่น (
กลับเท็จ;
}
};
$(เอกสาร).พร้อม(ฟังก์ชั่น())(
if (!elementSupportsAttribute("textarea", "placeholder")) (
$("#ตัวอย่างสาม")
.data("OriginalText", $("#example-three").text())
.css("สี", "ff9900")
.โฟกัส(ฟังก์ชั่น() (
var $el = $(นี่);
ถ้า (this.value == $el.data("ข้อความต้นฉบับ")) (
นี้.value = "";
}
})
.เบลอ(ฟังก์ชั่น() (
ถ้า (this.value == "") (
this.value = $(this).data("ข้อความต้นฉบับ");
}
});
) อื่น (
$("#ตัวอย่างสาม")
.attr("placeholder", $("#example-three").text())
.ข้อความ("");
}
});

8 บรรทัดแรกเป็นฟังก์ชันสำหรับตรวจสอบการมีอยู่ของแอตทริบิวต์ (any) ในบรรทัดที่ 10 เราจะตรวจสอบว่ามีแอตทริบิวต์ตัวยึดตำแหน่งอยู่หรือไม่ และหากไม่มี บรรทัด 11-24 ที่คุ้นเคยจะถูกดำเนินการ และหากไม่มี ให้ใช้บรรทัดที่ 26-28 ในต้นฉบับ บรรทัดที่ 28 ใช้ไม่ได้สำหรับฉัน และฉันแทนที่มันด้วยบรรทัดแบบง่าย - .attr("placeholder", "OriginalText")

โดยทั่วไป นี่คือทั้งหมดที่ฉันอยากจะบอกคุณในวันนี้ ด้านล่างนี้เป็นลิงค์พร้อมตัวอย่าง

แท็ก (จากพื้นที่ข้อความภาษาอังกฤษ - พื้นที่ข้อความ)เป็นองค์ประกอบแบบฟอร์มสำหรับสร้างพื้นที่ที่คุณสามารถป้อนข้อความได้หลายบรรทัด

เติมข้อความอัตโนมัติ

คุณลักษณะนี้ช่วยกรอกฟิลด์ข้อความด้วยข้อความที่ป้อนไว้ก่อนหน้านี้ ค่าจะถูกบันทึกและแทนที่โดยเบราว์เซอร์ ในขณะที่ผู้ใช้สามารถปิดใช้งานการเติมข้อความอัตโนมัติได้ในการตั้งค่าเบราว์เซอร์เพื่อความปลอดภัย และไม่สามารถควบคุมได้โดยแอตทริบิวต์เติมข้อความอัตโนมัติ

การป้อนอัตโนมัติของฟิลด์แบบฟอร์มเฉพาะจะผูกไว้กับแอตทริบิวต์ชื่อ และจะหายไปเมื่อค่ามีการเปลี่ยนแปลง

ไวยากรณ์

ค่านิยม

• เปิด - เปิดใช้งานการเติมข้อความอัตโนมัติ
• ปิด - ปิดใช้งานการป้อนอัตโนมัติ

ค่าเริ่มต้น

ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์

ออโต้โฟกัส

ตั้งค่าโฟกัสไปที่ช่องข้อความโดยอัตโนมัติ ในช่องดังกล่าว คุณสามารถพิมพ์ข้อความได้ทันทีโดยไม่ต้องเปลี่ยนเคอร์เซอร์ไปที่ช่องข้อความ

ไวยากรณ์

ค่านิยม

ค่าเริ่มต้น

ตามค่าเริ่มต้น คุณลักษณะโฟกัสอัตโนมัติไม่ได้ถูกตั้งค่าไว้

คอลัมน์

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

ไวยากรณ์

ค่านิยม

ค่าเริ่มต้น

นามสกุล

หากมีแอตทริบิวต์ dirname คู่ชื่อ/ค่าจะถูกส่งไปยังเซิร์ฟเวอร์ โดยที่ชื่อจะถูกระบุโดยแอตทริบิวต์ dirname และค่าจะถูกแทนที่ด้วยเบราว์เซอร์ สำหรับข้อความที่วิ่งจากซ้ายไปขวา ค่าจะเป็น ltr และสำหรับข้อความที่วิ่งจากขวาไปซ้าย (เช่น ภาษาอาหรับ) ค่าจะเป็น rtl

ไวยากรณ์

ค่านิยม

ฟรี สตริงข้อความซึ่งทำหน้าที่เป็นชื่อของพารามิเตอร์ เพื่อระบุว่าพารามิเตอร์นี้ระบุทิศทางของข้อความ เป็นเรื่องปกติที่จะเพิ่ม .dir ที่ท้ายบรรทัด

ค่าเริ่มต้น

พิการ

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

ข้อความที่ถูกบล็อกในช่องจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

ไวยากรณ์

ค่านิยม

ค่าเริ่มต้น

รูปร่าง

เชื่อมโยงฟิลด์ข้อความกับแบบฟอร์มตาม ID การเชื่อมต่อดังกล่าวจำเป็นเมื่อสนามตั้งอยู่ภายนอกด้วยเหตุผลบางประการ

ไวยากรณ์

ค่านิยม

ตัวระบุแบบฟอร์ม (ค่าของแอตทริบิวต์รหัสขององค์ประกอบ)

ค่าเริ่มต้น

ความยาวสูงสุด

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

ไวยากรณ์

ค่านิยม

จำนวนเต็มบวกใดๆ

ค่าเริ่มต้น

ความยาวขั้นต่ำ

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

ไวยากรณ์

ค่านิยม

จำนวนเต็มบวกใดๆ

ค่าเริ่มต้น

ชื่อ

กำหนดชื่อที่ไม่ซ้ำสำหรับองค์ประกอบ โดยทั่วไป ชื่อนี้จะใช้เมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์หรือเมื่อเข้าถึงฟิลด์ผ่านสคริปต์

ไวยากรณ์

ค่านิยม

ชื่อเป็นชุดอักขระรวมทั้งตัวเลขและตัวอักษร JavaScript คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ดังนั้นเมื่ออ้างถึงองค์ประกอบตามชื่อ ให้ใช้การสะกดรูปแบบเดียวกันกับแอตทริบิวต์ name

ค่าเริ่มต้น

ตัวยึดตำแหน่ง

แสดงข้อความคำใบ้ภายในช่องข้อความที่หายไปเมื่อได้รับการโฟกัสหรือพิมพ์ ข้อความสั้นๆ ที่ประกอบด้วยคำหรือวลีเดียวมักจะใช้เป็นคำใบ้

ไวยากรณ์

ค่านิยม

สตริงข้อความ

ค่าเริ่มต้น

อ่านอย่างเดียว

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

ไวยากรณ์

ค่านิยม

ค่าเริ่มต้น

โดยค่าเริ่มต้น ค่านี้จะถูกปิดใช้งาน

ที่จำเป็น

ตั้งค่าฟิลด์ข้อความที่จำเป็นก่อนที่จะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ หากไม่มีข้อความในช่องบังคับ เบราว์เซอร์จะแสดงข้อความและแบบฟอร์มจะไม่ถูกส่ง ลักษณะและเนื้อหาของข้อความขึ้นอยู่กับเบราว์เซอร์และผู้ใช้ไม่สามารถเปลี่ยนแปลงได้

ไวยากรณ์

ค่านิยม

ค่าเริ่มต้น

ตามค่าเริ่มต้น คุณลักษณะที่จำเป็นจะถูกปิดใช้งาน

แถว

ความสูงของช่องข้อความซึ่งกำหนดโดยจำนวนบรรทัดที่จะแสดงโดยไม่ต้องเลื่อนเนื้อหา หากขนาดตัวอักษรเปลี่ยนไปโดยใช้สไตล์ ความสูงของระยะขอบก็จะเปลี่ยนไปตามไปด้วย

ไวยากรณ์

ค่านิยม

จำนวนเต็มบวกใดๆ

ค่าเริ่มต้น

ใน HTML4 ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์และระบบปฏิบัติการของคุณ

ห่อ

คุณลักษณะ wrap จะบอกเบราว์เซอร์ถึงวิธีการตัดข้อความในช่อง และรูปแบบที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ หากไม่มีแอตทริบิวต์นี้ ข้อความในฟิลด์จะถูกพิมพ์เป็นหนึ่งบรรทัด เมื่อจำนวนอักขระที่ป้อนเกินความกว้างของพื้นที่ แถบแนวนอนเลื่อน การกดปุ่ม Enter จะเป็นการย้ายข้อความไปที่ บรรทัดใหม่และเคอร์เซอร์อยู่ที่ขอบด้านซ้ายของช่อง

ไวยากรณ์

ค่านิยม

• soft - คำในช่องข้อความจะถูกใส่ยัติภังค์โดยอัตโนมัติหากไม่พอดีกับขนาดพื้นที่ แต่ยัติภังค์จะไม่ถูกบันทึกเมื่อส่งไปยังเซิร์ฟเวอร์
• ยาก - ข้อความขนาดยาวที่ไม่พอดีกับความกว้างของฟิลด์จะถูกโอนไปยังบรรทัดใหม่โดยอัตโนมัติและพร้อมกับยัติภังค์จะถูกส่งไปยังเซิร์ฟเวอร์ จำเป็นต้องมีแอตทริบิวต์ cols เพื่อให้สิ่งนี้ทำงานได้

ค่าเริ่มต้น

ข้อมูลจำเพาะ ตัวอย่าง TEXTAREA

ใส่ความเห็นของคุณ:

ฟิลด์ TEXTAREA เป็นองค์ประกอบของแบบฟอร์มที่ช่วยให้คุณสามารถสร้างพื้นที่ที่คุณสามารถป้อนข้อความได้หลายบรรทัด ต่างจากแท็ก INPUT อนุญาตให้ใช้ตัวแบ่งบรรทัดในช่องข้อความ โดยจะบันทึกเมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์

ระหว่างแท็ก และ คุณสามารถวางข้อความใดๆ ที่จะแสดงภายในฟิลด์ได้

ไวยากรณ์


ข้อความ

แท็กปิด
ที่จำเป็น.

ตัวเลือก
cols - ความกว้างของฟิลด์เป็นอักขระ
ปิดการใช้งาน - บล็อกการเข้าถึงและการแก้ไของค์ประกอบ
name - ชื่อของฟิลด์ มีวัตถุประสงค์เพื่อให้ตัวประมวลผลฟอร์มสามารถระบุได้
อ่านอย่างเดียว - ระบุว่าผู้ใช้ไม่สามารถเปลี่ยนแปลงฟิลด์ได้
แถว - ความสูงของฟิลด์ในบรรทัดข้อความ
wrap - ตัวเลือกการตัดบรรทัด

ตัวอย่างที่ 1 การใช้แท็ก TEXTArea

ใส่ความเห็นของคุณ:

คำอธิบายของพารามิเตอร์แท็ก TEXTARE พารามิเตอร์ COLS

คำอธิบาย
ความกว้างของฟิลด์ข้อความซึ่งกำหนดโดยจำนวนอักขระในฟอนต์แบบโมโนสเปซ กล่าวอีกนัยหนึ่งความกว้างถูกกำหนดโดยจำนวนตัวอักษรที่อยู่ติดกันซึ่งมีความกว้างแนวนอนเท่ากัน หากขนาดตัวอักษรเปลี่ยนไปโดยใช้สไตล์ ความกว้างก็จะเปลี่ยนไปตามไปด้วย

ไวยากรณ์

ข้อโต้แย้ง
จำนวนเต็มบวกใดๆ

ค่าเริ่มต้น

ตัวอย่างที่ 2 ความกว้างของสนาม

พารามิเตอร์ที่ถูกปิดใช้งาน

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

ไวยากรณ์

ข้อโต้แย้ง
เลขที่

ค่าเริ่มต้น

ตัวอย่างที่ 3 การล็อคช่องข้อความ

ฟิลด์ที่ใช้งานอยู่
ฟิลด์ที่ไม่ได้ใช้งาน

พารามิเตอร์ NAME

คำอธิบาย
กำหนดชื่อที่ไม่ซ้ำสำหรับองค์ประกอบ TEXTARE โดยทั่วไป ชื่อนี้จะใช้เมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์หรือเมื่อเข้าถึงฟิลด์ผ่านสคริปต์

ไวยากรณ์

ข้อโต้แย้ง
ชื่อเป็นชุดอักขระรวมทั้งตัวเลขและตัวอักษร JavaScript คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ดังนั้นเมื่ออ้างถึงองค์ประกอบ TEXTARE ตามชื่อ ให้ใช้รูปแบบเดียวกันกับพารามิเตอร์ชื่อ

ค่าเริ่มต้น
เลขที่

ตัวอย่างที่ 4: การอ้างอิงถึงฟิลด์ตามชื่อ

ฟังก์ชั่น dataField (f) (
alert("คุณกรอก: " + f.comment.value);

ป้อนความคิดเห็น

พารามิเตอร์แบบอ่านอย่างเดียว

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

ไวยากรณ์

ข้อโต้แย้ง
เลขที่

ค่าเริ่มต้น
โดยค่าเริ่มต้น ค่านี้จะถูกปิดใช้งาน

ตัวอย่างที่ 5: ฟิลด์ข้อความแบบอ่านอย่างเดียว

ไม่สามารถเปลี่ยนแปลงฟิลด์ได้

พารามิเตอร์แถว

คำอธิบาย
ความสูงของช่องข้อความซึ่งกำหนดโดยจำนวนบรรทัดที่จะแสดงโดยไม่ต้องเลื่อนเนื้อหา หากขนาดตัวอักษรเปลี่ยนไปโดยใช้สไตล์ ความสูงของระยะขอบก็จะเปลี่ยนไปตามไปด้วย

ไวยากรณ์

ข้อโต้แย้ง
จำนวนบวกใดๆ

ค่าเริ่มต้น
ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์และระบบปฏิบัติการ

ตัวอย่างที่ 6 ความสูงของกล่องข้อความ

พารามิเตอร์ WRAP

คำอธิบาย
พารามิเตอร์ wrap จะบอกเบราว์เซอร์ถึงวิธีการตัดข้อความในช่อง TEXTAREA และรูปแบบที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ หากไม่มีพารามิเตอร์นี้ ข้อความในฟิลด์จะถูกพิมพ์เป็นหนึ่งบรรทัด เมื่อจำนวนอักขระที่ป้อนเกินความกว้างของพื้นที่ แถบเลื่อนแนวนอนจะปรากฏขึ้น การกดปุ่มจะย้ายข้อความไปยังบรรทัดใหม่ และเคอร์เซอร์จะอยู่ที่ขอบด้านซ้ายของช่อง

ไวยากรณ์

ข้อโต้แย้ง
ยาก - ด้วยพารามิเตอร์นี้ ข้อความยาวที่ไม่พอดีกับความกว้างของฟิลด์จะถูกย้ายไปยังบรรทัดใหม่โดยอัตโนมัติ แต่จะถูกส่งไปยังเซิร์ฟเวอร์เป็นบรรทัดเดียว การกดปุ่มบนแป้นพิมพ์จะเป็นการตั้งค่าการตัดข้อความ
ปิด - ปิดใช้งานตัวแบ่งบรรทัด เมื่อใส่แล้ว ข้อความยาวหากไม่มียัติภังค์ ระบบจะพิมพ์เป็นบรรทัดเดียวและแถบเลื่อนจะปรากฏขึ้น

ห่อ=ยาก

ห่อ = ปิด

มีค่าอื่น ๆ สำหรับพารามิเตอร์นี้ที่รองรับ เบราว์เซอร์ที่แตกต่างกันแต่ผลลัพธ์ของการใช้จะคล้ายกับค่าข้างต้น

ค่าเริ่มต้น
ปิด

ตัวอย่างที่ 7 การใส่ยัติภังค์ในช่องข้อความ

องค์ประกอบ (จากภาษาอังกฤษ "พื้นที่ข้อความ" - "ช่องข้อความ") กำหนดช่องข้อความหลายบรรทัด ข้อแตกต่างหลักจากแท็กคืออนุญาตให้ใช้ตัวแบ่งบรรทัดได้ (จะถูกบันทึกไว้เมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์) ตามค่าเริ่มต้น ไม่จำกัดจำนวนอักขระที่สามารถป้อนลงในฟิลด์ได้ และข้อความที่ป้อนจะแสดงเป็นแบบโมโนสเปซ

ไวยากรณ์ ... แท็กปิด

ที่จำเป็น.

คุณลักษณะการเติมข้อความอัตโนมัติ HTML5 เปิดใช้งานหรือปิดใช้งานการเติมข้อความอัตโนมัติ ออโต้โฟกัส HTML5 ระบุว่าพื้นที่ข้อความควรได้รับการโฟกัสโดยอัตโนมัติเมื่อโหลดหน้าเว็บ cols ระบุความกว้างที่มองเห็นได้ของพื้นที่ข้อความ (เป็นตัวอักษร) ค่าเริ่มต้นคือ 20 ตัวอักษร dirname พารามิเตอร์ HTML5 ที่ส่งทิศทางของข้อความไปยังเซิร์ฟเวอร์ ปิดการใช้งาน บ่งชี้ว่าพื้นที่ข้อความจะไม่ใช้งานเช่น คุณจะไม่สามารถป้อนข้อความหรือเปลี่ยนแปลงหรือคัดลอกข้อความเริ่มต้นได้ แบบฟอร์ม HTML5 กำหนดรูปแบบที่องค์ประกอบมีความเกี่ยวข้อง ค่าแอตทริบิวต์คือตัวระบุองค์ประกอบ คุณลักษณะนี้ช่วยให้คุณสามารถวางฟิลด์ข้อความหลายบรรทัดได้ทุกที่ในเอกสาร ไม่ใช่แค่ในฐานะลูกของ . ความยาวสูงสุด HTML5 กำหนดจำนวนอักขระสูงสุดที่สามารถป้อนลงในช่องข้อความ ความยาวขั้นต่ำ HTML5 ระบุจำนวนอักขระขั้นต่ำที่สามารถมีอยู่ในพื้นที่ข้อความ name กำหนดชื่อสำหรับฟิลด์ข้อความ มีวัตถุประสงค์เพื่อให้ตัวประมวลผลฟอร์มสามารถระบุได้ ตัวยึดตำแหน่ง HTML5 กำหนดคำแนะนำเครื่องมือสั้น ๆ ที่อธิบายค่าที่คาดหวังสำหรับฟิลด์ข้อความ คำแนะนำเครื่องมือจะปรากฏในช่องข้อความเมื่อว่างเปล่า และจะหายไปเมื่อได้รับการโฟกัส อ่านอย่างเดียว ระบุว่าฟิลด์ไม่สามารถแก้ไขได้โดยผู้ใช้ HTML5 ที่จำเป็น ระบุว่าฟิลด์ข้อความจะต้องกรอกก่อนที่จะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ แถว ระบุจำนวนบรรทัดที่มองเห็นได้ในพื้นที่ข้อความ (เป็นอักขระ) ค่าเริ่มต้นคือ 2 ตัวอักษร ตัด HTML5 กำหนดพารามิเตอร์การตัดบรรทัดในข้อความเมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์:
แข็ง- เบราว์เซอร์จะแทรกตัวแบ่งบรรทัดโดยอัตโนมัติเพื่อให้แต่ละบรรทัดไม่กว้างกว่าความกว้างของช่องข้อความ เงื่อนไขที่จำเป็นมูลค่าการใช้งานที่ยากคือ ตั้งค่าแอตทริบิวต์คอลัมน์
อ่อนนุ่ม- ข้อความถูกส่งเป็นบรรทัดเดียวต่อเนื่องกัน ไม่มีการขึ้นบรรทัดใหม่ เป็นค่าเริ่มต้น

แอตทริบิวต์และเหตุการณ์สากลพร้อมใช้งานสำหรับองค์ประกอบนี้

ความแตกต่างด้านสไตล์เริ่มต้นระหว่าง HTML 4.01 และ HTML5

มีการเพิ่มแอตทริบิวต์ใหม่ลงในแท็ก HTML5

ตัวอย่างการใช้งาน: ตัวอย่าง HTML: ลองด้วยตัวเอง

อ่านข้อตกลง:

เงื่อนไขข้อตกลงของเรา...

ความคิดเห็นของคุณเกี่ยวกับข้อตกลงนี้:

ใส่ความคิดเห็นของคุณ... ข้อมูลจำเพาะ สถานะข้อมูลจำเพาะ

บทความนี้นำเสนอเคล็ดลับหลายประการที่คุณอาจไม่รู้ว่าจะมีประโยชน์ในการพัฒนาของคุณ

1. รูปภาพเป็นพื้นหลังที่หายไปเมื่อป้อนข้อความ

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

พื้นที่ข้อความ ( พื้นหลัง: url(images/benice.png) ตรงกลาง ไม่ทำซ้ำ เส้นขอบ: 1px solid #888; )

ภาพพื้นหลังอาจส่งผลต่อความสามารถในการอ่านข้อความ ดังนั้น จะต้องลบภาพพื้นหลังออกเมื่อได้รับโฟกัส และส่งคืนหากพื้นที่ข้อความไม่มีข้อความ ตัวอย่างเช่น การใช้ jQuery สามารถทำได้ดังนี้:

$("textarea") .focus(function() ( $(this).css("พื้นหลัง", "none"); )) .blur(function() ( if ($(this).value == "" ) ( $(this).css("พื้นหลัง", "url(images/benice.png) center center no-repeat"); ) ));

2. ตัวยึดตำแหน่งใน HTML5

ปรากฏใน HTML5 คุณลักษณะใหม่เรียกว่าตัวยึดตำแหน่ง ค่าของแอตทริบิวต์นี้แสดงอยู่ใน องค์ประกอบข้อความและหายไปเมื่อได้รับโฟกัส เช่นเดียวกับเมื่อป้อนข้อความในองค์ประกอบ

ตัวยึดตำแหน่ง HTML5 ได้รับการสนับสนุนในเบราว์เซอร์ต่อไปนี้: Safari 5, Mobile Safari, Chrome 6 และ Firefox 4 alpha

3. ตัวยึดตำแหน่ง HTML5 พร้อมรองรับเบราว์เซอร์รุ่นเก่าที่ใช้ jQuery

วิธีที่ง่ายที่สุดในการตรวจสอบว่าเบราว์เซอร์รองรับแอตทริบิวต์หรือไม่คือการตรวจสอบโดยใช้จาวาสคริปต์:

ฟังก์ชั่น elementSupportsAttribute(องค์ประกอบ, คุณลักษณะ) ( var test = document.createElement(element); return (แอตทริบิวต์ในการทดสอบ); );

จากนั้นคุณสามารถเขียนโค้ดที่จะเริ่มทำงานหากเบราว์เซอร์ไม่รองรับแอตทริบิวต์ตัวยึดตำแหน่ง

ถ้า (!elementSupportsAttribute("textarea", "placeholder")) ( // หากเบราว์เซอร์ไม่รองรับแอ็ตทริบิวต์ โค้ด jQuery จะถูกดำเนินการ $("#example-three") .data("OriginalText", $( "#example-three ").text()) .css("color", "#999") .focus(function() ( var $el = $(this); if (this.value == $el. data("OriginalText" )) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("OriginalText" ); ) )) ; ) else ( // หากเบราว์เซอร์รองรับ HTML5 ให้ใช้ฟีเจอร์นี้ $("#example-three") .attr("placeholder", $("#example-three").text( )) .ข้อความ( "");

4. ลบเส้นขีดพื้นที่ข้อความ

เบราว์เซอร์บนเอ็นจิ้น webkit รวมถึง FireFox 3.6 จะร่างพื้นที่ข้อความเมื่อมีการโฟกัส คุณสามารถลบเค้าร่างนี้ได้โดยใช้คุณสมบัติเค้าร่าง css สำหรับเบราว์เซอร์ webkit สำหรับ FireFox ให้ใช้คุณสมบัติ -moz-appearance หรือคุณสามารถตั้งค่าองค์ประกอบให้เป็นเส้นขอบหรือพื้นหลังก็ได้

Textarea ( โครงร่าง: none; -moz-appearance: none; border: 1px solid #999; /* การตั้งค่าคุณสมบัตินี้จะลบโครงร่างใน FireFox */ )

5. ห้ามปรับขนาด

เบราว์เซอร์ Webkit เพิ่มองค์ประกอบภาพลงในพื้นที่ข้อความที่มุมขวาล่างซึ่งช่วยให้คุณสามารถปรับขนาดพื้นที่ข้อความได้ หากคุณต้องการลบฟีเจอร์นี้ คุณต้องใช้คุณสมบัติ CSS ต่อไปนี้:

พื้นที่ข้อความ ( ปรับขนาด: none; )

6. การเพิ่มความสามารถในการปรับขนาด

jQuery UI ช่วยให้คุณสามารถเพิ่มความสามารถในการปรับขนาดให้กับพื้นที่ข้อความได้ วิธีนี้ใช้ได้กับเบราว์เซอร์ทั้งหมด และสำหรับเบราว์เซอร์ webkit จะแทนที่พฤติกรรมเริ่มต้น ในการใช้คุณสมบัตินี้ คุณต้องเชื่อมต่อ jquery.ui และเขียนโค้ดต่อไปนี้:

$("textarea").ปรับขนาดได้();

7. ปรับขนาดให้พอดีกับเนื้อหา

James Padolsey เขียนสคริปต์ jQuery ที่มีประโยชน์ซึ่งช่วยให้คุณสามารถปรับขนาดพื้นที่ข้อความให้พอดีกับเนื้อหาได้โดยอัตโนมัติ ดูเหมือนว่าปลั๊กอินนี้จะไม่สามารถใช้งานได้อีกต่อไป แต่คุณสามารถใช้ปลั๊กอินนี้ได้ เป็นต้น ปลั๊กอินมีการตั้งค่ามากมาย แต่วิธีที่ง่ายที่สุดในการใช้งานคือ:

$("textarea").ปรับขนาดอัตโนมัติ();

8.โนแรป

เพื่อหลีกเลี่ยงการขึ้นบรรทัดใหม่ องค์ประกอบทั้งหมดจะใช้คุณสมบัติ CSS ช่องว่าง ซึ่งใช้ไม่ได้กับ textarea สำหรับ textarea คุณต้องใช้แอตทริบิวต์ wrap

9. การลบแถบเลื่อนใน IE

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

พื้นที่ข้อความ (ล้น: auto; )

ในกรณีนี้ แถบเลื่อนจะไม่แสดงเมื่อข้อความทั้งหมดถูกวางในพื้นที่ข้อความ แต่จะแสดงหากจำเป็น

คุณสามารถดูตัวอย่างสำหรับบทความได้

WHATWG HTML มาตรฐานการดำรงชีวิต (WHATWG)	มาตรฐานการครองชีพ
HTML 4.01 (W3C)	คำแนะนำ
HTML5 (W3C)	คำแนะนำ
HTML 5.1 (W3C)