เนื่องจากผู้ใช้ร้องขอให้เชื่อมโยงกับวัตถุ Textrange วัตถุที่ใช้ในการประมวลผลส่วนข้อความของวัตถุ JavaScript
Textrange เป็นวัตถุที่ใช้ในการแสดงอักขระจีนในองค์ประกอบ HTML แม้ว่าเราจะไม่ใช้วัตถุนี้บ่อยนัก แต่ก็มีให้ใน IE4.0 อย่างไรก็ตามวิธีการโทรที่จัดทำโดย Textrange นั้นค่อนข้างคลุมเครือดังนั้นเราจะทำอย่างไรกับมัน?
การใช้ Textrange แบบดั้งเดิมคือการใช้งานเนื้อหาข้อความที่เลือกโดยผู้ใช้ที่มีเมาส์บนหน้าเว็บเช่นการเปลี่ยนแปลงการลบการเพิ่มเติมใหม่ ฯลฯ แต่วัตถุประสงค์คลาสสิกคือการค้นหาข้อความ (นี่ค่อนข้างง่าย) ในหน้าเว็บและรับตำแหน่งของเคอร์เซอร์กล่องอินพุต หลังสามารถสร้างการใช้งานที่มีประโยชน์มากขึ้นเช่น: การ จำกัด อินพุต masktextbox จุดทางเทคนิคหลักของมันคือการรับตำแหน่งเคอร์เซอร์ของกล่องอินพุตจากนั้นใช้นิพจน์ปกติเพื่อตัดสินเนื้อหาอินพุต นอกจากนี้ยังมี "การใช้ปุ่มลูกศรเพื่อนำทางตามธรรมชาติในเมทริกซ์กล่องอินพุต" ที่ฉันจะแนะนำในภายหลัง จุดทางเทคนิคหลักคือการได้รับตำแหน่งเคอร์เซอร์ในกล่องอินพุต
รหัสทั้งหมดเพื่อให้ได้ตำแหน่งเคอร์เซอร์ในกล่องอินพุตนั้นสั้นมาก แต่วัตถุและวิธีการเหล่านี้ไม่ได้ใช้กันมาก
รหัส JS
<span style = "ตัวอักษรขนาด: medium;"> <script language = "JavaScript"> ฟังก์ชั่น getCursorpsn (txb) {var slct = document.selection; var rng = slct.createrange (); txb.select (); rng.setendpoint ("startTostart", slct.createrange ()); var psn = rng.text.length; rng.collapse (เท็จ); rng.select (); คืน psn; } </script> </span>ที่นี่เราจะพูดคุยเกี่ยวกับผลข้างเคียงที่จะนำไปสู่การทำงานของกล่องอินพุตหลังจากใช้วิธี getCursorpsn ()
สำหรับกล่องอินพุต
รหัส HTML
<span style = "Font-Size: Medium;"> <input type = "text" onkeydown = "getCursorpsn (นี่)"> </span>
มันจะไม่สามารถใช้คีย์ Shift+ ซ้ายและขวาเพื่อเลือกข้อความได้อีกต่อไป
รหัส HTML
<span style = "ตัวอักษรขนาด: medium;"> <textarea onkeydown = "getCursorpsn (นี่)"> </textarea> </span>
คุณไม่สามารถใช้ปุ่ม SHIFT+ UP, DOWN, ซ้ายและขวาได้อีกต่อไปเพื่อเลือกข้อความ เพราะหลังจากรหัสได้รับจุดเริ่มต้นของเคอร์เซอร์ปัจจุบันไปยังข้อความให้เรียก rng.collapse (เท็จ); จะเปลี่ยน editpoint ของข้อความในตะกร้าข้อความ
1. รหัสตัวอย่างเพื่อตอบสนองความต้องการของผู้ใช้ใช้ปุ่มบน, ล่าง, ซ้าย, ซ้ายและขวาเพื่อให้ได้การกระโดดของกล่องข้อความและเลือกเนื้อหาของกล่องข้อความเพื่ออำนวยความสะดวกในการปรับเปลี่ยนผู้ใช้ รหัสมีดังนี้:
รหัส JS
<span style = "Font-Size: Medium;"> var range = $ currentTextField.CreatetexTrange (); // $ currentTextfield เป็นช่วงวัตถุ jQuery.movestart ('อักขระ', 0); range.select (); </span>ต่อไปนี้เป็นบทความที่นำเข้าเกี่ยวกับ Textrange ที่ฉันรู้สึกดีมาก:
รหัส HTML
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> เอกสารใหม่ </title> <meta http-equiv = "content-type" content = "ข้อความ/html; charset = utf-8"/> } #show {พื้นหลังสี: #ccff99; } </style> </head> <body> <textarea id = "เนื้อหา" cols = "30" แถว = "10"> ปลาในแม่น้ำตายอย่างแปลกประหลาดผู้อยู่อาศัยท้ายน้ำต้องทนทุกข์ทรมานจากโรคแปลก ๆ และพืชตามชายฝั่งกลายพันธุ์อย่างต่อเนื่อง พวกเขาเป็นสารกำจัดศัตรูพืชที่เหลือหรือไม่? หรือการโจมตีทางชีวเคมี? โปรดให้ความสนใจกับ cctv -10 "การสำรวจทางวิทยาศาสตร์" ในคืนนี้โปรแกรมพิเศษที่กำลังจะมาถึง: "ชายผู้ซักผ้าที่ลึกลับริมแม่น้ำ - ทีมฟุตบอลชายจีน" </textarea> <button id = "btn"> รับค่าที่เลือก </button> <div id = "แสดง" - } /* มีปัญหาบางอย่างภายใต้เมธอดหนึ่ง ff* / ฟังก์ชัน getSelectText () {ลอง {// ie: document.selection.createrange () w3c: window.getSelection () var selectText = (document.selection && document.lection.createrange)? document.selection.createrange (). ข้อความ: window.getSelection (). toString (); if (selectText! = null && selectText.trim ()! = "") {return selectText; }} catch (err) {}} /* เมธอด 2* / ฟังก์ชัน getSelectText2 (id) {var t = document.getElementById (id); if (window.getSelection) {ถ้า (t.selectionStart! = undefined && t.selectionend! = undefined) {return t.value.substring (t.selectionStart, t.selectionend); } else {return ""; }} else {return document.selection.createrange (). ข้อความ; }} document.getElementById ('btn'). onclick = function () {document.getElementById ('show'). innerhtml = getSelectText2 ('เนื้อหา'); } </script> </body> </html>