사용자는 Textrange 객체와 연결하도록 요청하기 때문에 JavaScript 객체의 텍스트 부분을 처리하는 데 사용되는 객체입니다.
Textrange는 HTML 요소로 한자를 표현하는 데 사용되는 객체입니다. 이 객체를 자주 사용하지는 않지만 IE4.0에 제공됩니다. 그러나 Textrange가 제공하는 호출 방법은 상대적으로 모호합니다. 그래서 우리는 무엇을 할 수 있습니까?
Textrange의 전통적인 사용은 변경, 삭제, 새로운 추가 등 웹 페이지에 마우스가있는 사용자가 선택한 텍스트 콘텐츠를 작동시키는 것입니다. 그러나 전형적인 목적은 웹 페이지에서 텍스트 (비교적 간단함)를 찾아 입력 상자 커서의 위치를 얻는 것입니다. 후자는 다음과 같은 더 유용한 용도를 생성 할 수 있습니다. 입력 마스크 텍스트 박스 제한, 핵심 기술 포인트는 입력 상자의 커서 위치를 얻은 다음 일반 표현식을 사용하여 입력 컨텐츠를 판단하는 것입니다. 나중에 소개 할 "입력 상자 매트릭스에서 자연스럽게 탐색하기 위해 화살표 키 사용"도 있습니다. 핵심 기술 지점은 또한 입력 상자에서 커서 위치를 얻는 것입니다.
입력 상자에서 커서 위치를 얻기위한 전체 코드는 실제로 매우 짧지 만 이러한 객체와 방법은 일반적으로 사용되지 않습니다.
JS 코드
<span style = "font-size : medium;"> <script language = "javaScript"> 함수 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 (); 반환 psn; } </script> </span>여기서는 getCursorPSN () 메소드를 사용한 후 입력 상자 작동에 가져올 부작용에 대해 이야기합니다.
입력 상자의 경우
HTML 코드
<span style = "font-size : medium;"> <input type = "text"onkeydown = "getCursOrpsn (this)"> </span>
더 이상 Shift+ 왼쪽 및 오른쪽 화살표 키를 사용하여 텍스트를 선택할 수 없습니다.
HTML 코드
<span style = "font-size : medium;"> <textarea onkeydown = "getCursOrpsn (this)"> </textarea> </span>
, 더 이상 Shift+ Up, Down, 왼쪽 및 오른쪽 방향 키를 사용하여 텍스트를 선택할 수 없습니다. 코드 후에는 텍스트에 대한 현재 커서의 시작점을 얻으므로 rng.collapse (false)를 호출합니다. 텍스트 바스켓에서 텍스트의 편집점을 변경합니다.
1. 코드 스 니펫 사용자 요구 사항을 충족하고, 상단, 하단, 왼쪽 및 오른쪽 키를 사용하여 텍스트 상자의 점프를 달성하고 텍스트 상자의 내용을 선택하여 사용자 수정을 용이하게합니다. 코드는 다음과 같습니다.
JS 코드
<span style = "font-size : medium;"> var range = $ currentTextfield.creatextrange (); // $ currentTextfield는 jQuery 객체 범위입니다. Range.Select (); </span>
다음은 Textrange에 대한 수입 기사입니다.
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> 새로운 문서 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <style> body {font-size; } #show {배경색 : #ccff99; } </style> </head> <body> <TextRea ID = "Content"Cols = "30"rows = "10"> 강의 물고기는 이상하게 죽고, 하류 주민들은 이상한 질병으로 고통 받고 해안을 따라 식물은 끊임없이 돌연변이합니다. 그들은 잔류 살충제입니까? 아니면 생화학 적 공격? CCTV -10 "Scientific Exploration"에주의를 기울여주십시오. 오늘 밤, 다가오는 특별 프로그램 : "강의 신비한 발 세탁 남자 - 강의 신비한 발 세탁자 - 중국 남자 축구 팀"</textarea> <button id = "btn"> 선택한 가치 받기 </button> <div id = "show"> </div> <cript> prototype.trim = function (/^/s+|/s. ""); } /* 메소드에 몇 가지 문제가 있습니다. document.selection.createrange (). text : window.getSelection (). toString (); if (selectText! = null && selectText.trim ()! = "") {return selectText; }} catch (err) {}} /* 메소드 2* / function getSelectText2 (id) {var t = document.getElementById (id); if (wind } else {return ""; }} else {return document.selection.createrange (). 텍스트; }} document.getElementById ( 'btn'). onclick = function () {document.getElementById ( 'show'). innerHtml = getSelectText2 ( 'content'); } </script> </body> </html>