Because the user requests to associate with the TextRange object, an object used to process the text part of the JavaScript object.
TextRange is an object used to express Chinese characters in HTML elements. Although we don't use this object very often, it is provided in IE4.0. However, the calling methods provided by TextRange are relatively obscure, so what can we do with it?
The traditional use of TextRange is to operate the text content selected by users with a mouse on the web page, such as changes, deletion, new additions, etc. But its classic purpose is to find text (this is relatively simple) in a web page and get the position of the input box cursor. The latter can generate many more useful uses, such as: limiting input MaskTextBox, its core technical point is to obtain the cursor position of the input box and then use regular expressions to judge the input content. There is also the "Using arrow keys to navigate naturally in the input box matrix" that I will introduce later. The core technical point is also to obtain the cursor position in the input box.
The entire code to get the cursor position in the input box is actually very short, but these objects and methods are not very 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 we will talk about the side effects that will bring to the input box operation after using the GetCursorPsn() method.
For the input box
Html code
<span style="font-size: medium;"><input type="text" onkeydown="GetCursorPsn(this)"></span>
It will no longer be able to use Shift+ left and right arrow keys to select text;
Html code
<span style="font-size: medium;"><textarea onkeydown="GetCursorPsn(this)"></textarea></span>
, you can no longer use Shift+ up, down, left and right direction keys to select text. Because after the code obtains the startPoint of the current cursor to the text, calling rng.collapse(false); will change the EditPoint of the text in the text basket.
1. Code snippets to meet user requirements, use the upper, lower, left and right keys to achieve the jump of the text box, and select the content of the text box to facilitate user modification. 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>The following is an imported article about TextRange that I feel pretty good:
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"> Fish in the river die strangely, residents downstream suffer from strange diseases, and plants along the coast constantly mutate. Are they residual pesticides? Or a biochemical attack? Please pay attention to CCTV-10 "Scientific Exploration" tonight, the upcoming special program: "The Mysterious Foot Washing Man by the River - Chinese Men's Football Team" </textarea> <button id="btn">Get the selected value</button> <div id="show"></div> <script> String.prototype.trim = function() { return this.replace(/^/s+|/s+$/g, ""); } /* There are some problems under method one 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){} } /* Method 2*/ 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>