อินพุตย้อนหลังกล่องข้อความที่เรียกว่าหมายถึงจุดเน้นของกล่องอินพุตอยู่ที่จุดเริ่มต้นเสมอ ดังที่แสดงในรูปที่เมื่อฉันป้อน 123456789 987654321 จะปรากฏบนกล่องอินพุต
ทำไมคุณถึงต้องการทำการสาธิตนี้? เป็นเพราะฉันพบมันในโครงการ ข้อกำหนดของโครงการคือกล่องอินพุตสองกล่องหนึ่งอินพุตในลำดับบวกและอื่น ๆ เป็นอินพุตในย้อนหลัง ด้านล่างฉันจะเขียนแนวคิดการใช้งานและรหัส
อินพุตข้อความย้อนหลัง:
ตราบใดที่เรามั่นใจว่าโฟกัสของกล่องอินพุตอยู่ในสถานที่แรกเสมอเราสามารถบรรลุได้ว่าทุกครั้งที่เราป้อนข้อมูลนั่นคือการเกิดซ้ำ
รหัส:
ฟังก์ชั่น setPosition (ctrl, pos) {// ตั้งค่าฟังก์ชันตำแหน่งเคอร์เซอร์ถ้า (ctrl.setSelectionRange) {ctrl.focus (); ctrl.setSelectionRange (pos, pos); // สร้างช่วงพื้นที่การเลือกการเชื่อมต่อ (จริง); // ย้ายเคอร์เซอร์ไปยังตำแหน่งเริ่มต้นของช่วงพื้นที่เลือกช่วงเวลา ('อักขระ', POS); // เปลี่ยนตำแหน่งที่พื้นที่การเลือกสิ้นสุดช่วง movestart ('ตัวละคร', pos); // เปลี่ยนตำแหน่งที่พื้นที่การเลือกเริ่มต้นช่วงเลือก (); // ซิงค์เนื้อหาที่เลือกกับวัตถุปัจจุบัน}}ตราบใดที่เราตั้งค่าพารามิเตอร์ POS เป็น 0 ก็จะดี
ด้านล่างเป็นตัวอย่างที่สมบูรณ์ซึ่งใช้การลบปกติและอินพุตย้อนหลัง
<! doctype html> <html> <head> <title> </title> <meta http-equiv = "เนื้อหาประเภท" content = "text/html; charset = utf-8"> <style> .content {width: 300px; {width: 200px;} </style> <script src = "http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"> </script> </head> type = "text"> </li> <li> <input type = "text text"> </li> </ul> </div> <script> ฟังก์ชั่น setPosition (ctrl, pos) {// ตั้งค่าตำแหน่งเคอร์เซอร์ถ้า (ctrl.setSelectionRange) {ctrl.focus () range = ctrl.createTextrange (); // สร้างช่วงพื้นที่การเลือกการเชื่อมต่อ (จริง); // ย้ายเคอร์เซอร์ไปยังตำแหน่งเริ่มต้นของช่วงพื้นที่เลือกช่วงเวลา ('อักขระ', POS); // เปลี่ยนตำแหน่งสิ้นสุดของช่วงพื้นที่เลือก Movestart ('ตัวละคร', POS); // เปลี่ยนตำแหน่งเริ่มต้นของช่วงการเลือกช่วงการเลือก (); // ซิงค์เนื้อหาที่เลือกกับวัตถุปัจจุบัน}} $ ('. elem') บน ('keypress keyup', ฟังก์ชัน () {ถ้า (event.keycode === 8) return; setPosition (this, 0);});นอกจากนี้คุณอาจใช้ฟังก์ชั่นที่เกี่ยวข้องเพื่อให้ได้ตำแหน่งโฟกัส
ฟังก์ชั่น getPosition (CTRL) {// คือ supportVAR CaretPos = 0; if (document.selection) {ctrl.focus (); var sel = document.selection.createrange (); sel.movestart ('ตัวละคร', -ctrl.value.length); caretpos = sel.text.length; ctrl.selectionstart; return (caretpos);}สรุป:
โดยการตั้งค่าและรับโฟกัสอินพุตข้อความเราสามารถทำเอฟเฟกต์พิเศษอื่น ๆ เช่นการลบคำหรือตัวแปรทั้งหมด ฯลฯ
หากคุณมีความคิดที่ดีเกี่ยวกับบทความนี้คุณสามารถ @Me ฉันหวังว่าบทความนี้จะช่วยคุณได้!