TextRangeオブジェクト
4320 ワード
ユーザ要求側がTextRangeオブジェクトと縁を結んでいるため、JavaScriptオブジェクトのテキスト部分の内容を処理するためのオブジェクト.
TextRangeはHTML要素の文字を表現するためのオブジェクトで、私たちは普段このオブジェクトをあまり使わないが、IE 4にある.0で提供されています.しかし、TextRangeが提供する呼び出し方法は難解ですが、私たちはそれを何にすることができますか?TextRangeの伝統的な用途は、ユーザーがWebページ上でマウスで選択した文字内容の操作、例えば変化、削除、新規化などである.しかし、その古典的な用途は、Webページで文字を検索し(これは比較的簡単)、入力ボックスカーソルの位置を取得することです.後者はまた、入力を制限するMaskTextBoxなど、入力ボックスのカーソル位置を取得し、正規表現を使用して入力内容を判断する核心技術点を持つ多くのより有用な用途を誘導することができる.また、後述する「入力ボックスマトリクスで方向キーを使用した自然なナビゲーション」では、コアテクノロジーポイントも入力ボックスのカーソル位置を取得します.
入力ボックスのカーソル位置を取得するコードは、実際には短いですが、これらのオブジェクトやメソッドはあまり一般的ではありません.
ここで,このGetCursorPsn()メソッドを用いると,入力ボックス操作に与える副作用について述べる.
入力ボックスの場合
Shift+左右の2つの方向キーを使用してテキストを選択することはできません.について
を選択すると、Shift+上下左右の4つの方向キーを使用してテキストを選択できなくなります.コードは、現在のカーソルからテキストへのstartPointを取得する後にrngを呼び出すためである.collapse(false );テキストかご内のテキストのEditPointが変わります.
1、ユーザーの要求コードの断片を満たして、上下左右の4つのキーを使ってテキストボックスのジャンプを実現して、同時にそのテキストボックスの内容を選択して、それによってユーザーの修正を便利にして、コードは以下の通りです:
以下は舶来の個人的な感覚がまあまあのTextRangeに関する文章です.
TextRangeはHTML要素の文字を表現するためのオブジェクトで、私たちは普段このオブジェクトをあまり使わないが、IE 4にある.0で提供されています.しかし、TextRangeが提供する呼び出し方法は難解ですが、私たちはそれを何にすることができますか?TextRangeの伝統的な用途は、ユーザーがWebページ上でマウスで選択した文字内容の操作、例えば変化、削除、新規化などである.しかし、その古典的な用途は、Webページで文字を検索し(これは比較的簡単)、入力ボックスカーソルの位置を取得することです.後者はまた、入力を制限するMaskTextBoxなど、入力ボックスのカーソル位置を取得し、正規表現を使用して入力内容を判断する核心技術点を持つ多くのより有用な用途を誘導することができる.また、後述する「入力ボックスマトリクスで方向キーを使用した自然なナビゲーション」では、コアテクノロジーポイントも入力ボックスのカーソル位置を取得します.
入力ボックスのカーソル位置を取得するコードは、実際には短いですが、これらのオブジェクトやメソッドはあまり一般的ではありません.
<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>
ここで,このGetCursorPsn()メソッドを用いると,入力ボックス操作に与える副作用について述べる.
入力ボックスの場合
<input type="text" onkeydown="GetCursorPsn(this)">
Shift+左右の2つの方向キーを使用してテキストを選択することはできません.について
<textarea onkeydown="GetCursorPsn(this)"></textarea>
を選択すると、Shift+上下左右の4つの方向キーを使用してテキストを選択できなくなります.コードは、現在のカーソルからテキストへのstartPointを取得する後にrngを呼び出すためである.collapse(false );テキストかご内のテキストのEditPointが変わります.
1、ユーザーの要求コードの断片を満たして、上下左右の4つのキーを使ってテキストボックスのジャンプを実現して、同時にそのテキストボックスの内容を選択して、それによってユーザーの修正を便利にして、コードは以下の通りです:
var range = $currentTextfield.createTextRange();//$currentTextfield jQuery
range.moveStart('character',0);
range.select();
以下は舶来の個人的な感覚がまあまあのTextRangeに関する文章です.
<!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 )? 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>