Heim > Artikel > Web-Frontend > Beispiel für die Anwendung eines TextRange-Objekts zur Verarbeitung von Textinhalten_Javascript-Fähigkeiten

Beispiel für die Anwendung eines TextRange-Objekts zur Verarbeitung von Textinhalten_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:40:571256Durchsuche

Aufgrund der Zuordnung zwischen dem Benutzeranforderer und dem TextRange-Objekt handelt es sich um ein Objekt, das zur Verarbeitung des Textteils des JavaScript-Objekts verwendet wird.

TextRange ist ein Objekt, das zur Darstellung von Text in HTML-Elementen verwendet wird. Obwohl wir dieses Objekt normalerweise nicht oft verwenden, ist es bereits in IE4.0 enthalten. Die von TextRange bereitgestellten Aufrufmethoden sind jedoch relativ unklar. Was können wir also damit machen?
Die traditionelle Verwendung von TextRange besteht darin, den Textinhalt zu bedienen, den der Benutzer mit der Maus auf der Webseite umkreist, z. B. Ändern, Löschen, Hinzufügen usw. Seine klassische Verwendung besteht jedoch darin, Text auf einer Webseite zu finden (das ist relativ einfach) und die Position des Eingabefeld-Cursors zu ermitteln. Letzteres kann viele weitere nützliche Verwendungszwecke ableiten, beispielsweise die MaskTextBox, die die Eingabe begrenzt. Ihr zentraler technischer Zweck besteht darin, die Cursorposition des Eingabefelds zu ermitteln und dann reguläre Ausdrücke zu verwenden, um den Eingabeinhalt zu bestimmen. Es gibt auch eine „natürliche Navigation in der Eingabefeldmatrix mithilfe der Pfeiltasten“, die ich später vorstellen werde. Der technische Kernpunkt besteht darin, die Cursorposition im Eingabefeld zu ermitteln.

Der gesamte Code zum Ermitteln der Cursorposition im Eingabefeld ist eigentlich sehr kurz, aber diese Objekte und Methoden werden nicht häufig verwendet.

Js-Code

<span style="font-size: medium;"><script language="javascript"> 

function GetCursorPsn(txb) 

{ 

var slct = document.selection; 

var rng = slct.createRange(); 

txb.select(); 

rng.setEndPoint("StartToStart", slct.createRange()); 

var psn = rng.text.length; 

rng.collapse(false); 

rng.select(); 

return psn; 

} 

</script></span>

Hier werden wir über die Nebenwirkungen der Verwendung der GetCursorPsn()-Methode auf Eingabefeldoperationen sprechen.

Für Eingabefeld

Html-Code

<span style="font-size: medium;"><input type="text" onkeydown="GetCursorPsn(this)"></span>

Es ist nicht mehr möglich, die Umschalttaste und die linke Pfeiltaste zum Auswählen von Text für

zu verwenden

Html-Code

<span style="font-size: medium;"><textarea onkeydown="GetCursorPsn(this)"></textarea></span>

, Sie können die vier Pfeiltasten Umschalt, Oben, Unten, Links und Rechts nicht mehr zum Markieren von Text verwenden. Denn nachdem der Code den Startpunkt des aktuellen Cursors auf den Text abgerufen hat, ändert der Aufruf von rng.collapse(false); den EditPoint des Textes im Textfeld.

1. Ein Codeausschnitt, der den Benutzeranforderungen entspricht. Verwenden Sie die vier Tasten nach oben, unten, links und rechts, um zum Textfeld zu springen und gleichzeitig den Inhalt des Textfelds auszuwählen, um die Änderung durch den Benutzer zu erleichtern . Der Code lautet wie folgt:

Js-Code

<span style="font-size: medium;">var range = $currentTextfield.createTextRange();//$currentTextfield为jQuery对象 

range.moveStart('character',0); 

range.select();</span>

Das Folgende ist ein importierter Artikel über TextRange, den ich persönlich für ziemlich gut halte:

Html-Code

<!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> new document </title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<style> 

body { font-size:12px; } 

#show { background-color:#CCFF99; } 

</style> 

</head> 

<body> 

<textarea id="content" cols="30" rows="10"> 

河中鱼类离奇死亡，下游居民频染怪病，沿岸植物不断变异，是残留农药？还是生化攻击？敬请关注今晚CCTV-10《科学探索》，即将播出的专题节目：《神秘的河边洗脚人--中国男足》 

</textarea> 


<button id="btn">获取选中值</button> 

<div id="show"></div> 

<script> 

String.prototype.trim = function() { 

return this.replace(/^\s+|\s+$/g, ""); 

} 

/* 方法一 FF下有点问题 */ 

function getSelectText() { 

try{ 

// IE: document.selection.createRange() W3C:window.getSelection() 

var selectText = (document.selection && document.selection.createRange )&#63; document.selection.createRange().text : window.getSelection().toString(); 

if(selectText != null && selectText.trim() != ""){ 

return selectText; 

} 

}catch(err){} 

} 

/* 方法二 */ 

function getSelectText2(id) { 

var t = document.getElementById(id); 

if(window.getSelection) { 

if(t.selectionStart != undefined && t.selectionEnd != undefined) { 

return t.value.substring(t.selectionStart, t.selectionEnd); 

} else { 

return ""; 

} 

} else { 

return document.selection.createRange().text; 

} 

} 

document.getElementById('btn').onclick = function() { 

document.getElementById('show').innerHTML = getSelectText2('content'); 

} 

</script> 

</body> 

</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Serverseitiges Node.js-Framework für die Anwendungsentwicklung – Hapi.js_node.jsNächster Artikel：Serverseitiges Node.js-Framework für die Anwendungsentwicklung – Hapi.js_node.js

In Verbindung stehende Artikel

Mehr sehen