editor_javascript スキルでカーソルの位置を記録する JavaScript を実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

editor_javascript スキルでカーソルの位置を記録する JavaScript を実装する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

javascript 位置カーソル編集者記録

この記事の例では、エディター内のカーソルの位置を記録する JavaScript の実装方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function $(ele){return document.getElementById(ele)}
//记录编辑器中的位置
   var selection_start;
   var selection_end;
   function savePos(textBox){
   var start=0;
   var end=0;
   if(typeof(textBox.selectionStart) == "number"){ // not ie
    //alert(typeof(textBox.selectionStart) );
    start = textBox.selectionStart;
    end = textBox.selectionEnd;
   }
   else if(document.selection){
    var range = document.selection.createRange();
    if(range.parentElement().id == textBox.id){
     var range_all = document.body.createTextRange();
     range_all.moveToElementText(textBox);
     for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
      range_all.moveStart('character', 1);
     for (var i = 0; i <= start; i ++){
      if (textBox.value.charAt(i) == '/n')
       start++;
     }
      var range_all = document.body.createTextRange();
      range_all.moveToElementText(textBox);
      for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
       range_all.moveStart('character', 1);
       for (var i = 0; i <= end; i ++){
        if (textBox.value.charAt(i) == '/n')
         end ++;
       }
     }
    }
    selection_start = start;
    selection_end = end;
   }
</script>
<form action="" id="test">
<textarea id="t" onfocus="savePos(this);$('log').value=selection_start" onkeydown="savePos(this);$('log').value=selection_start" onmousedown="savePos(this);$('log').value=selection_start" onmouseup="savePos(this);$('log').value=selection_start" >
</textarea>
<input type="text" id="log" />
</form>
</body>
</html>

ログイン後にコピー

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7563

CakePHP チュートリアル

1385

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Pinduoduo で購入したものの記録はどこで確認できますか? 購入した製品の記録を表示するにはどうすればよいですか? Mar 12, 2024 pm 07:20 PM

Pinduoduo ソフトウェアは多くの優れた製品を提供し、いつでもどこでも購入でき、各製品の品質は厳しく管理され、すべての製品は正規品であり、多くの優遇ショッピング割引があり、誰もがオンラインで買い物をすることができます。携帯電話番号を入力してオンラインにログインし、オンラインで複数の配送先住所や連絡先情報を追加し、最新の物流動向をいつでも確認できますさまざまなカテゴリの商品セクションが開き、検索して上下にスワイプして購入および注文することができます家から出ることなく利便性を体験することができます.オンラインショッピングサービスでは、購入した商品を含むすべての購入記録を確認することもでき、数十のショッピング赤い封筒とクーポンを無料で受け取ることもできます.今回、編集者は Pinduoduo ユーザーに詳細なオンラインサービスを提供しました購入した製品の記録を表示する方法。 1. 携帯電話を開き、Pinduoduo アイコンをクリックします。

C言語プログラミングに必須のソフトウェア：初心者におすすめの優れたヘルパー5選 Feb 20, 2024 pm 08:18 PM

C言語は基本的かつ重要なプログラミング言語であり、初心者にとっては適切なプログラミングソフトウェアを選択することが非常に重要です。市場にはさまざまな C プログラミングソフトウェアのオプションがありますが、初心者にとってはどれが自分に適しているかを選択するのは少し混乱するかもしれません。この記事では、初心者がすぐに始められ、プログラミングスキルを向上できるように、5 つの C 言語プログラミングソフトウェアをお勧めします。 Dev-C++Dev-C++ は、無料のオープンソース統合開発環境 (IDE) であり、特に初心者に適しています。シンプルで使いやすい統合エディター、

スタードーム鉄道クロッカー映画テレビパークの折り紙鳥の場所 Mar 27, 2024 pm 11:51 PM

スタードーム鉄道のクローカー映画テレビパークには、合計 20 羽の折り紙の鳥がいます。多くのプレイヤーは、クロッカー映画テレビパークのどこに折り紙の鳥があるのか知りません。編集者は、誰もがわかるように、各折り紙の鳥の場所をまとめました。検索して、具体的な内容については、クローカー映画テレビ公園の折り紙の鳥の場所に関するこの最新のまとめをご覧ください。本海スタードーム鉄道のご案内：クルックムービーパーク1階2、クルックムービーパーク2階のオリガミバードスタードーム鉄道

pip インストールパッケージストレージの場所と構造を理解する Jan 18, 2024 am 08:23 AM

pip によってインストールされるパッケージの保存場所の詳細については、特定のコードサンプルが必要です。Pip は、Python 言語で一般的に使用されるパッケージ管理ツールです。Python パッケージのインストール、アップグレード、管理を簡単に行うために使用されます。 pip を使用してパッケージをインストールすると、対応するパッケージファイルが PyPI (Python Package Index) から自動的にダウンロードされ、指定された場所にインストールされます。では、pip によってインストールされたパッケージはどこに保存されるのでしょうか?これは、多くの Python 開発者が遭遇する問題です。この記事では、pip によってインストールされるパッケージの場所について詳しく説明し、次のことを提供します。

win11のシャットダウン場所 Jan 10, 2024 am 09:14 AM

コンピューターから長時間離れる場合は、コンピューターを保護するためにコンピューターをシャットダウンするのが最善です。では、win11 ではシャットダウンはどこにあるのでしょうか? 実際、一般的に言えば、スタートメニューを開くだけで次のことがわかります。その中にあるシャットダウンボタン。 Windows 11 をシャットダウンする場所: 回答: スタートメニューの電源ボタン内。 1. まず、下部のタスクバーにある「Windows ロゴ」をクリックして「スタートメニュー」を開きます。 2. 開いた後、図に示すように、右下隅に「電源」ボタンが見つかります。 3. 電源ボタンをクリックすると、「シャットダウン」が表示されるので、クリックしてシャットダウンします。 4. クラッシュなどの特別な状況によりコンピュータをシャットダウンできない場合は、コンピュータの「電源ボタン」を直接長押しして強制的にシャットダウンできます。

Kuaishou はどこで公開されていますか?またその場所を変更するにはどうすればよいですか?アップロードされたビデオに位置情報を追加するにはどうすればよいですか? Mar 21, 2024 pm 06:00 PM

中国で有名なショートビデオプラットフォームとして、Kuaishou は多くのクリエイターに自分の才能を披露し、人生を共有する機会を提供します。動画をアップロードする際、初心者クリエイターの中には動画の投稿場所を変更する方法に戸惑う方もいるかもしれません。この記事では、Kuaishou ビデオの公開場所を変更する方法を紹介し、このプラットフォームを有効に活用して作品を紹介できるように、Kuaishou ビデオ公開に関するいくつかのヒントを共有します。 1. Kuaishou はどこで公開されていますか?またその場所を変更するにはどうすればよいですか? 1. 公開インターフェイス: Kuaishou APP で、[公開] ボタンをクリックしてビデオ公開インターフェイスに入ります。 2. 場所情報: 公開インターフェースに「場所」列があり、クリックして場所選択インターフェースに入ります。 3. 場所を変更する: 場所選択インターフェイスで、[場所] ボタンをクリックして現在の場所を表示します。場所を変更したい場合は「場所」をクリックしてください

Go 言語開発ツールの紹介: 必須ツールのリスト Mar 29, 2024 pm 01:06 PM

タイトル: Go 言語開発ツール入門: 必須ツール一覧 Go 言語の開発プロセスでは、適切な開発ツールを使用することで開発効率とコード品質を向上させることができます。この記事では、Go 言語開発で一般的に使用されるいくつかの重要なツールを紹介し、読者がその使用方法と機能をより直感的に理解できるように、具体的なコード例を添付します。 1.VisualStudioCodeVisualStudioCode は、豊富なプラグインと機能を備えた軽量で強力なクロスプラットフォーム開発ツールです。

ラストエラアリーナはどこにありますか? Mar 07, 2024 pm 08:16 PM

「ラストエイジ」では、ゲームモード、チャレンジモード、アリーナなど、さまざまなモードでプレイすることができます。アリーナはゲームをプレイするための究極の方法であり、プレイヤーが選択できる 2 つのモードを提供します。最後の時代のアリーナはどこですか? 回答: アリーナはエンドゲームのゲームであり、その特定の場所はチャンピオンズゲートにあります。アリーナキーまたはメモリーアリーナキーを入手する必要があります。右クリックすると世界地図が表示され、チャンピオンズゲートの特定の場所を見つけることができます。アリーナは、アリーナチャンピオンシップモードとエンドレスアリーナモードの 2 つの主要なモードに分かれています。前者には、40 ウェーブの敵と選択された報酬が含まれており、常にアリーナチャンピオンとの戦いで最高潮に達します。アリーナチャンピオンシップモードには4つのステージがあり、難易度が高いほど報酬が豪華になります。エンドレスアリーナは無限のウェーブがあるモードで、徐々に難易度が上がり、最高のスコアを獲得した挑戦者が獲得できます。

See all articles

editor_javascript スキルでカーソルの位置を記録する JavaScript を実装する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック