テキストを処理するための TextRange オブジェクトのアプリケーション例 content

ホームページ

ウェブフロントエンド

jsチュートリアル

テキストを処理するための TextRange オブジェクトのアプリケーション例 content_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

ユーザーリクエスターと TextRange オブジェクト間の関連付けにより、これは JavaScript オブジェクトのテキスト部分を処理するために使用されるオブジェクトです。

TextRange は、HTML 要素内のテキストを表すために使用されるオブジェクトです。通常、このオブジェクトはあまり使用されませんが、IE4.0 ではすでに提供されています。ただし、TextRange によって提供される呼び出しメソッドは比較的わかりにくいので、それを使って何ができるでしょうか?
TextRange の従来の使用法は、Web ページ上でユーザーがマウスで囲んだテキストコンテンツを変更、削除、追加などの操作を行うことです。ただし、その古典的な用途は、Web ページ内のテキストを検索し (これは比較的単純です)、入力ボックスのカーソルの位置を取得することです。後者は、入力を制限する MaskTextBox など、さらに多くの便利な用途を導き出すことができます。その中心的な技術点は、入力ボックスのカーソル位置を取得し、正規表現を使用して入力内容を決定することです。後で紹介する「矢印キーを使用した入力ボックスマトリックスの自然なナビゲーション」もありますが、技術的なポイントは入力ボックス内のカーソル位置を取得することです。

入力ボックス内のカーソル位置を取得するコード全体は実際には非常に短いですが、これらのオブジェクトとメソッドは一般的には使用されません。

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>

ログイン後にコピー

ここでは、入力ボックスの操作で 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、上下左右の矢印キーを使用してテキストを選択できなくなります。コードがテキストへの現在のカーソルの startPoint を取得した後、rng.collapse(false); を呼び出すと、テキストボックス内のテキストの EditPoint が変更されるためです。

1. ユーザーの要件を満たすコードスニペット。ユーザーの変更を容易にするために、上下左右の 4 つのキーを使用してテキストボックスにジャンプし、同時にテキストボックスの内容を選択します。コードは次のとおりです:

JSコード

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

range.moveStart('character',0); 

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

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7400

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1217

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

Ajaxを使用して動的にボックスコンテンツをロードします Mar 06, 2025 am 01:07 AM

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。重要な概念： ajaxとjquery

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム