An application instance of a TextRange object that handles part of the text

2020-03-30 03:38:26
OfStack

An object that handles part of the text of a JavaScript object because the user requested it to be attached to a TextRange object.

TextRange is an object used to represent text in HTML elements, and although this object is not commonly used, it is already available in IE4.0. But the call methods provided by TextRange are obscure, so what can we do with them?
The traditional use of TextRange is to manipulate text selected by the user on a Web page by circling it with the mouse, such as changing, deleting, adding, and so on. But its classic USES are to find text on a Web page (this one is relatively simple) and to get the position of the input field cursor. The latter has many more useful USES that can be derived, such as the MaskTextBox that restricts input, whose core technical point is to get the cursor position of the input box and then use regular expressions to determine the input content. There is also the "natural navigation in the input box matrix using the direction keys", which I will describe later, and the core technique is also to get the cursor position in the input box.

The entire code to get the cursor position in the input field is very short, but these objects and methods are not commonly used.

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>

Here are the side effects of using the GetCursorPsn() method on the input field.

For the input box

The Html code


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

It will no longer be able to use the Shift+ left and right keys to select text; for

The Html code


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

, will no longer be able to select text using Shift+ up, down, left, or right. Because the code calls rng.collapse(false) after obtaining the startPoint of the current cursor to the text; Changes the EditPoint of the text in the text basket.

1. To meet the requirements of the user, use the four keys to jump to the text box and select the content of the text box to facilitate the user to modify. The code is as follows:

Js code


<span style="font-size: medium;">var range = $currentTextfield.createTextRange();//$currentTextfield is a jQuery object

range.moveStart('character',0); 

range.select();</span>

Here's a sample of what I thought was a good article about TextRange:

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

 River fish mysteriously dead, downstream residents frequent strange disease, coastal plants continue to mutate, is residual pesticides? A biological attack? Stay tuned for tonight CCTV-10 "The quest for science," the upcoming feature: "the mysterious river foot washer. -- China men's football -  

</textarea> 


<button id="btn"> Get the selected value </button> 

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

<script> 

String.prototype.trim = function() { 

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

} 

 

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){} 

} 

 

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>