タグ

rangeに関するakiyanのブックマーク (15)

  • テキストエリアの選択範囲を正しく取得する方法 - ぷみてく

    入力フォームのテキストエリアに、ブロックインデントなどの機能を追加するためには、現在の選択範囲を正しく取得する必要があります。selectionStart, selectionEndプロパティがサポートされていれば話は簡単なのですが、IEはサポートされていません。IEではTextRangeオブジェクトを使うのですが、このtextプロパティは選択範囲末尾の改行を削除してしまうという変わった仕様のため、単純なやり方だと、1行目の行末と2行目の行頭を区別することができません。これらを考慮して、正しい選択範囲をとれるコードを書きました。 処理の流れは次の通りです。 selectionStart プロパティがあれば selectionStart と selectionEnd を返す 選択範囲のTextRangeオブジェクトを取得する(selectedRange) 選択範囲より前の部分のTextRan

    テキストエリアの選択範囲を正しく取得する方法 - ぷみてく
  • Introduction to DOM Range - DOM ECMAScripting

    DOM Core は 12 種類のノードを定義していますが、それらは大まかに 2 個のグループに分けられます。子ノードを持つものElement、Document、DocumentFragment など。これらの nodeValue は null です(Attr を除く)。子ノードを持たないもの(葉ノード)Text、Comment、CDATASection、ProcessingInstruction。これらの nodeValue はテキストデータで、data プロパティでも参照できます。DOM Range ではノードをコンテナと呼びます。子ノードを持つコンテナの場合、それぞれの子の間をオフセットとして数えます。最初の子の前をオフセット 0 とし、全部で子ノード数 + 1 個のオフセットが存在します。子ノードを持たないコンテナの場合、文字と文字の間をオフセットとして数えます。テキストデータが「

    akiyan
    akiyan 2012/10/10
    ちょうくわしい。
  • jQueryでtextareaのカーソル位置の行数を取得・設定(スクロール対応)

    textarea内のカーソル位置や行数を取得したり、指定行のみ置換したりなどをJavaScriptでサラリと出来るかな?と思ったら、それなりに大変だったという記録です。 一部jQueryオブジェクトですがjQueryの機能は使っていないので依存しない改造も簡単だと思います。 カーソル位置までの行数 テキストエリア内のカーソルはキャレットという名称です。キャレット位置の行数を取得する関数は用意されておらず、キャレット位置までの文字数のみが取得できます。日語も1カウントです。その後、改行コードの数を調べることで行数を割り出します。 まず、文字数から行数を取得できる関数をStringクラスに追加しておきます。ブラウザによって異なる改行コードの差異も吸収します。 String.prototype.getLinefromCount = function(start){ // 文字数から行数を取得

    jQueryでtextareaのカーソル位置の行数を取得・設定(スクロール対応)
  • Set textarea selection in Internet Explorer

  • TextRange

    TextRange 解説 HTMLエレメントの中のテキストを表す。 注意事項 このオブジェクトを使って、エレメント内のテキストの読み出しや変更、指定した文字列をテキスト内に置いたり、テキストの表示を変更するコマンドを実行することができる。 BODYエレメント、BUTTONエレメント、TEXTAREAエレメント、またはtextタイプのINPUTエレメントに対してcreateTextRangeメソッドを適用することにより、TextRangeオブジェクトを得ることができる。move、moveToElementText、findTextなどのメソッドを使って、TextRangeオブジェクトの先頭と末尾を移動させてその範囲を変更できる。TextRangeオブジェクト内でプレーンテキストやHTMLテキストを読み出しや変更が行える。これらのテキストの形はHTMLテキストがHTMLタグを含んでいるというこ

    TextRange
  • 【JScript】IEでTextRangeを使用する場合の注意

    IE7(JScript)でTextRangeを使用していて、おかしな挙動に気がつきました。 TextRangeでは範囲内に<br />などが有る場合は改行とみなされますが、これが含まれる場合には、 TextRange.moveStart('character', N)/TextRange.moveEnd('character', N)で選択範囲を移動する場合には、Nには改行を1文字とみなした数値を指定する必要がある。 TextRange.text.lengthで取れるテキスト長は、改行を[CR][LF]の2文字とみなして計算されている模様。 また、範囲中、最後の文字(改行以外)よりも後の改行文字数は、lengthに含まれない。

    【JScript】IEでTextRangeを使用する場合の注意
  • TextRangeオブジェクトの使用

    TextRangeオブジェクトの使用 innerText/innerHTMLプロパティやouterText/outerHTMLプロパティや、今までのセクションで説明したメソッドが使えれば、ほとんどのユーザーは満足するだろう。しかし、ここでは"テキストレンジ"オブジェクトを使い、テキスト処理のさらなる応用について説明する。TextRangeオブジェクトでは、次の処理が行える。 ここでは、ダイナミックコンテントのもっと高度な使い方を説明する。それは"テキストレンジ"オブジェクトを使ったテキスト操作である。TextRangeオブジェクトでは、次の処理が行える。 指定したエレメントや位置にテキストを配置する。 ドキュメント中で単語や文字を検索する。 論理単位によってテキストを移動させる。 プレーンテキストとHTMLテキストに読み書きアクセスを許可する。 この機能は、Win32®プラットフォーム以外

    TextRangeオブジェクトの使用
  • 「知恵ノート」は終了いたしました - Yahoo!知恵袋

    平素よりYahoo!知恵袋をご利用いただきありがとうございます。 2017年11月30日をもちまして、「知恵ノート」機能の提供を終了いたしました。 これまでご利用いただきました皆様にはご迷惑をおかけすることとなり、誠に申し訳ございません。 長年のご愛顧、心よりお礼申しあげます。 引き続き、Yahoo!知恵袋の「Q&A」機能をご利用ください。 Yahoo!知恵袋トップ 知恵ノートサービス終了のお知らせ プライバシー - 利用規約 - メディアステートメント - ガイドライン - ご意見・ご要望 - ヘルプ・お問い合わせ JASRAC許諾番号:9008249113Y38200 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

    「知恵ノート」は終了いたしました - Yahoo!知恵袋
  • not found

  • Studio FREE-SKY - テキストエリアの選択範囲の位置を特定する

    テキストエリアの選択範囲の位置を取得してあれしてあーしたい時があります。 しかし、IEにはNNのselectionStartプロパティ、selectionEndプロパティのような直接位置を取得するようなメソッドやプロパティはありません。NNでの取得方法は、テキストエリアの選択範囲を取得するに載っています。 そこで自前で取得するしかないのがMicrosoftの陰謀です。 NNの場合は説明するまでもないので、ここから先の話しはIE限定です。 まず、位置といってもその用途によって以下の2通りがあります。 NNのように位置情報をsubstringメソッド等を使って処理を共通化させたい場合 IEのTextRangeオブジェクトのmoveStartメソッド、moveEndメソッドを使いたい場合 1番目、2番目とも求め方は変わらないのでほとんど共通ですが、まず1番目から説明します。 その前に、IEとNN

  • MANZOU MEMO

    過去の話題 ・データベースで安全にバイナリデータを扱うには・・・ (0) ・Call-time pass-by-reference has been deprecated (0) ・ヤバイのでとりあえず・・・ (0) ・2.映像信号の仕組み (0) ・1.ブラウン管の仕組み (1) ・Windows Steady Stateについて (0) ・Class extendsについて (0) ・Range設定ファンクションについて(W3C DOM) (0) ・addEventListener()の第3引数 (0) ・iframe編集時のimgタグの取り扱い (0)

    akiyan
    akiyan 2012/09/27
    詳しい。
  • ChromeでRangeとかゴリゴリ使う時にハマる - 食べられるキリン

    JavaScriptWRONG_DOCUMENT_ERRORが突然出るようになって原因を調べたiframeを使ってrangeを色々やりたい場合はDocumentは揃える必要がある。Firefoxなどでは不要。とりあえずWRONGかどうかはたいした問題ではなく、Rangeを生成した段階で要素が空だった時が問題。d = iframe.contentWindow.docuyment;range.selectNode(d.body);として何かを選択させておく必要がある。簡単にまとめChromeで要素が選択されていない状態でRangeを使う時はとりあえずbodyでもなんでもいいから選択させとけよ。

    akiyan
    akiyan 2011/06/30
    chromeでは「iframeを使ってrangeを色々やりたい場合はDocumentは揃える必要がある。」
  • 八章第一回 Rangeとは — JavaScript初級者から中級者になろう — uhyohyo.net

    八章第一回 Rangeとはこのページの最終更新日:2017年8月26日 八章では、Rangeというものを解説します。今回は、そもそもRangeとはどういうものかを解説します。 Rangeとは、文書中における「範囲」を表すものです。例えば、 あい<strong>うえ</strong>お。というソースががあれば、 あいうえお。のように表示されます。このとき、例えば あいう えお 。 ↑  ↑ ここから  ここまで のような感じである範囲を表せます。 要するに「『え』から『お』まで」なので、案外単純なように見えます。しかし、DOMという観点からこれを見ていくと、上の木構造は となっていて、この範囲は(木構造上で)離れた複数のノードにまたがっています。こうなると、一筋縄ではいかないのが想像がつくと思います。このようなものを扱うのが、Rangeなのです。 範囲の表し方Rangeは「開始点」と「終了点

    八章第一回 Rangeとは — JavaScript初級者から中級者になろう — uhyohyo.net
    akiyan
    akiyan 2011/06/23
    この説明も素晴らしい...
  • JavaScript Rangeの使い方 - とみぞーノート

    DOM仕様書にこれらのプロパティについて図解入りで説明がありわかりやすい。 文字を選択した時に表1のプロパティがどのように変化するかを表示するサンプル。 http://www.bit-hive.com/~tomita/RangeDump/ JavaScriptのソースはhttp://www.bit-hive.com/~tomita/RangeDump/range.js 3. 現在の選択範囲の取得の仕方(IEの場合) IEのRangeオブジェクトにはテキストの選択範囲を表すTextRangeと画像などのコントロールオブジェクトの選択を表すControlRangeの2種類が存在する。 3.1 TextRange,ControlRangeの取得 IEの場合Selectionはdocument内に既にあるので以下のようにして取得できる。 var range = document.selection

    akiyan
    akiyan 2011/06/23
    これは詳しい。すごい。
  • Rangeオブジェクトメモ - TakiTakeの日記

    リファレンスは、こことかここ DOM Range setStartやsetEndは、第一引数要素の第二引数位置へ始点(終点)を移動する。 下記の例だと、2から4までつまり、"cd"を選択している。 <span>abcde</span> var range = document.createRange(); var node = document.getElementsByTagName("span").item(0); var startOffset = 2; var endOffset = 4; range.setStart(node, startOffset); range.setEnd(node, endOffset); TextRange moveStartやmoveEndは、第一引数単位で第二引数分だけ始点(終点)を進める。 下記の例だと、 処理 選択されている文字列 一番最初の

    Rangeオブジェクトメモ - TakiTakeの日記
    akiyan
    akiyan 2011/06/10
    .
  • 1