Da der Benutzer anfordert, sich mit dem Textrange -Objekt zu verbinden, wird ein Objekt zum Verarbeiten des Textteils des JavaScript -Objekts verwendet.
Textrange ist ein Objekt, mit dem chinesische Zeichen in HTML -Elementen ausgedrückt werden. Obwohl wir dieses Objekt nicht sehr oft verwenden, ist es in IE4.0 bereitgestellt. Die von Textrange bereitgestellten Anrufmethoden sind jedoch relativ dunkel. Was können wir also damit anfangen?
Die traditionelle Verwendung von Textrange besteht darin, den von Benutzern mit einer Maus auf der Webseite ausgewählten Textinhalt wie Änderungen, Löschungen, Neuzugänge usw. zu bedienen, aber der klassische Zweck besteht darin, Text (dies relativ einfach) auf einer Webseite zu finden und die Position des Eingabefelds Cursor zu erhalten. Letzteres kann viele weitere nützliche Verwendungszwecke erzeugen, wie z. Es gibt auch die "Verwenden von Pfeiltasten, um in der Eingabefeldmatrix auf natürliche Weise zu navigieren", die ich später vorstellen werde. Der technische Kernpunkt besteht auch darin, die Cursorposition im Eingangsfeld zu erhalten.
Der gesamte Code, um die Cursorposition in den Eingabefeld zu erhalten, ist tatsächlich sehr kurz, aber diese Objekte und Methoden werden nicht sehr häufig verwendet.
JS -Code
<span style = "font-size: medium;"> <script Language = "javaScript"> Funktion getCursorpsn (txb) {var Slct = document.Selection; var rng = slct.createrange (); txb.Select (); rng.setendpoint ("startTostart", slct.createrange ()); var psn = rng.text.length; rng.collapse (falsch); rng.select (); PSN zurückgeben; } </script> </span>Hier sprechen wir über die Nebenwirkungen, die nach Verwendung der Methode GetCursorpsn () in die Eingangsbox -Operation führen.
Für das Eingabefeld
HTML -Code
<span style = "Schriftgröße: Medium;"> <Eingabe type = "text" Onkeydown = "getCursorpsn (this)"> </span>
Es kann nicht mehr in der Lage sein, Shift+ links und rechte Pfeiltasten zu verwenden, um Text auszuwählen.
HTML -Code
<span style = "Schriftgröße: Medium;"> <textarea Onkeydown = "getCursorpsn (this)"> </textArea> </span>
Sie können nicht mehr Umschalt+ Up, Down-, Links- und Rechtsrichtschlüssel verwenden, um Text auszuwählen. Denn nachdem der Code den Startpunkt des aktuellen Cursors zum Text erhalten hat, rufen Sie RNG.Collapse (False) auf; Ändern Sie den Bearbeitungspunkt des Textes im Textkorb.
1. Code -Snippets, um die Benutzeranforderungen zu erfüllen, verwenden Sie die oberen, unteren, linken und rechten Tasten, um den Sprung des Textfelds zu erreichen, und wählen Sie den Inhalt des Textfelds aus, um die Änderung der Benutzer zu erleichtern. Der Code ist wie folgt:
JS -Code
<span style = "Schriftgröße: Medium;"> var range = $ currentTextField.CreateTextrange (); // $ currentTextField ist ein jQuery-Objektbereich.Movestart ('Zeichen', 0); Bereich.Select (); </span>Das Folgende ist ein importierter Artikel über Textrange, der mir ziemlich gut fühle:
HTML -Code
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <titels> Neues Dokument </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style-type "body {font-size: 12px; } #show {Hintergrundfarbe: #CCFF99; } </style> </head> <body> <textarea id = "content" cols = "30" rows = "10"> Fische im Fluss sterben seltsam, die Bewohner flussabwärts leiden unter seltsamen Krankheiten und Pflanzen entlang der Küste mutieren ständig. Sind sie Restpestizide? Oder ein biochemischer Angriff? Bitte achten Sie auf CCTV -10 "Scientific Exploration" heute Abend, das bevorstehende Spezialprogramm: "Der mysteriöse Fußwaschmann am Fluss - Chinese Herren Football Team" </textArea> <button id = "btn"> Holen Sie sich den ausgewählten Wert </button> <div id = "show"> </div> <script> String.prototytype. ""); } /* Es gibt einige Probleme unter der Methode eins ff* / function getSelectText () {try {// ie: document.Selection.createrange () w3c: window.getSelection () var selectText = (document.Selection && document.Selection.Createrange)? document.Selection.Createrange (). Text: window.getSelection (). toString (); if (selectText! = null && selectText.trim ()! = "") {return selectText; }} catch (err) {}} /* methode 2* / function getSelectText2 (id) {var t = document.getElementById (id); if (window.getSelection) {if (t.selectionStart! } else {return ""; }} else {return document.Selection.Createrange (). Text; }} document.getElementById ('btn'). onclick = function () {document.getElementById ('show'). InnerHtml = getSelectText2 ('Inhalt'); } </script> </body> </html>