recherche

Maison >interface Web >js tutoriel >Exemple d'application d'objet TextRange pour le traitement des compétences content_javascript de texte

Exemple d'application d'objet TextRange pour le traitement des compétences content_javascript de texte

WBOY
WBOYoriginal
2016-05-16 16:40:571289parcourir

En raison de l'association entre le demandeur de l'utilisateur et l'objet TextRange, il s'agit d'un objet utilisé pour traiter la partie texte de l'objet JavaScript.

TextRange est un objet utilisé pour représenter du texte dans des éléments HTML. Bien que nous n'utilisions généralement pas souvent cet objet, il est déjà fourni dans IE4.0. Cependant, les méthodes d’appel fournies par TextRange sont relativement obscures, alors que pouvons-nous en faire ?
L'utilisation traditionnelle de TextRange consiste à gérer le contenu du texte que l'utilisateur survole avec la souris sur la page Web, comme modifier, supprimer, ajouter, etc. Mais son utilisation classique consiste à rechercher du texte dans une page Web (c'est relativement simple) et à obtenir la position du curseur de la zone de saisie. Ce dernier peut dériver de nombreuses utilisations plus utiles, comme le MaskTextBox qui limite la saisie. Son principal point technique est d'obtenir la position du curseur de la zone de saisie, puis d'utiliser des expressions régulières pour déterminer le contenu de la saisie. Il existe également une "navigation naturelle dans la matrice de la zone de saisie à l'aide des touches fléchées" que je présenterai plus tard. Le point technique principal est d'obtenir la position du curseur dans la zone de saisie.

L'intégralité du code pour obtenir la position du curseur dans la zone de saisie est en fait très court, mais ces objets et méthodes ne sont pas couramment utilisés.

Code Js

<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>

Ici, nous parlerons des effets secondaires de l'utilisation de la méthode GetCursorPsn() sur les opérations de la zone de saisie.

Pour la zone de saisie

Code HTML

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

Il ne pourra plus utiliser les touches Maj et flèche gauche pour sélectionner du texte pour

 ;

Code HTML

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

, vous ne pourrez plus utiliser les quatre touches fléchées Shift, haut, bas, gauche et droite pour sélectionner du texte. Parce qu'une fois que le code a obtenu le point de départ du curseur actuel sur le texte, l'appel de rng.collapse(false); modifiera le point d'édition du texte dans la zone de texte.

1. Un extrait de code pour répondre aux besoins de l'utilisateur. Utilisez les quatre touches haut, bas, gauche et droite pour accéder à la zone de texte et sélectionner le contenu de la zone de texte en même temps, afin de faciliter la modification par l'utilisateur. . Le code est le suivant :

Code Js

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

range.moveStart('character',0); 

range.select();</span>

Ce qui suit est un article importé sur TextRange que je trouve personnellement plutôt bon :

Code 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> 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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Cadre de développement d'applications côté serveur Node.js -- Hapi.js_node.jsArticle suivant：Cadre de développement d'applications côté serveur Node.js -- Hapi.js_node.js

Articles Liés

Voir plus