入力フォームのテキストエリアに、ブロックインデントなどの機能を追加するためには、現在の選択範囲を正しく取得する必要があります。selectionStart, selectionEndプロパティがサポートされていれば話は簡単なのですが、IEはサポートされていません。IEではTextRangeオブジェクトを使うのですが、このtextプロパティは選択範囲末尾の改行を削除してしまうという変わった仕様のため、単純なやり方だと、1行目の行末と2行目の行頭を区別することができません。これらを考慮して、正しい選択範囲をとれるコードを書きました。 処理の流れは次の通りです。 selectionStart プロパティがあれば selectionStart と selectionEnd を返す 選択範囲のTextRangeオブジェクトを取得する(selectedRange) 選択範囲より前の部分のTextRan
DOM Core は 12 種類のノードを定義していますが、それらは大まかに 2 個のグループに分けられます。子ノードを持つものElement、Document、DocumentFragment など。これらの nodeValue は null です（Attr を除く）。子ノードを持たないもの（葉ノード）Text、Comment、CDATASection、ProcessingInstruction。これらの nodeValue はテキストデータで、data プロパティでも参照できます。DOM Range ではノードをコンテナと呼びます。子ノードを持つコンテナの場合、それぞれの子の間をオフセットとして数えます。最初の子の前をオフセット 0 とし、全部で子ノード数 + 1 個のオフセットが存在します。子ノードを持たないコンテナの場合、文字と文字の間をオフセットとして数えます。テキストデータが「
textarea内のカーソル位置や行数を取得したり、指定行のみ置換したりなどをJavaScriptでサラリと出来るかな?と思ったら、それなりに大変だったという記録です。 一部jQueryオブジェクトですがjQueryの機能は使っていないので依存しない改造も簡単だと思います。 カーソル位置までの行数 テキストエリア内のカーソルはキャレットという名称です。キャレット位置の行数を取得する関数は用意されておらず、キャレット位置までの文字数のみが取得できます。日本語も1カウントです。その後、改行コードの数を調べることで行数を割り出します。 まず、文字数から行数を取得できる関数をStringクラスに追加しておきます。ブラウザによって異なる改行コードの差異も吸収します。 String.prototype.getLinefromCount = function(start){ // 文字数から行数を取得
TextRange 解説 HTMLエレメントの中のテキストを表す。 注意事項 このオブジェクトを使って、エレメント内のテキストの読み出しや変更、指定した文字列をテキスト内に置いたり、テキストの表示を変更するコマンドを実行することができる。 BODYエレメント、BUTTONエレメント、TEXTAREAエレメント、またはtextタイプのINPUTエレメントに対してcreateTextRangeメソッドを適用することにより、TextRangeオブジェクトを得ることができる。move、moveToElementText、findTextなどのメソッドを使って、TextRangeオブジェクトの先頭と末尾を移動させてその範囲を変更できる。TextRangeオブジェクト内でプレーンテキストやHTMLテキストを読み出しや変更が行える。これらのテキストの形はHTMLテキストがHTMLタグを含んでいるというこ
IE7(JScript)でTextRangeを使用していて、おかしな挙動に気がつきました。 TextRangeでは範囲内に<br />などが有る場合は改行とみなされますが、これが含まれる場合には、 TextRange.moveStart('character', N)／TextRange.moveEnd('character', N)で選択範囲を移動する場合には、Nには改行を1文字とみなした数値を指定する必要がある。 TextRange.text.lengthで取れるテキスト長は、改行を[CR][LF]の2文字とみなして計算されている模様。 また、範囲中、最後の文字(改行以外)よりも後の改行文字数は、lengthに含まれない。
TextRangeオブジェクトの使用 innerText/innerHTMLプロパティやouterText/outerHTMLプロパティや、今までのセクションで説明したメソッドが使えれば、ほとんどのユーザーは満足するだろう。しかし、ここでは"テキストレンジ"オブジェクトを使い、テキスト処理のさらなる応用について説明する。TextRangeオブジェクトでは、次の処理が行える。 ここでは、ダイナミックコンテントのもっと高度な使い方を説明する。それは"テキストレンジ"オブジェクトを使ったテキスト操作である。TextRangeオブジェクトでは、次の処理が行える。 指定したエレメントや位置にテキストを配置する。 ドキュメント中で単語や文字を検索する。 論理単位によってテキストを移動させる。 プレーンテキストとHTMLテキストに読み書きアクセスを許可する。 この機能は、Win32®プラットフォーム以外
平素よりYahoo!知恵袋をご利用いただきありがとうございます。 2017年11月30日をもちまして、「知恵ノート」機能の提供を終了いたしました。 これまでご利用いただきました皆様にはご迷惑をおかけすることとなり、誠に申し訳ございません。 長年のご愛顧、心よりお礼申しあげます。 引き続き、Yahoo!知恵袋の「Q&A」機能をご利用ください。 Yahoo!知恵袋トップ 知恵ノートサービス終了のお知らせ プライバシー - 利用規約 - メディアステートメント - ガイドライン - ご意見・ご要望 - ヘルプ・お問い合わせ JASRAC許諾番号：9008249113Y38200 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
テキストエリアの選択範囲の位置を取得してあれしてあーしたい時があります。 しかし、IEにはNNのselectionStartプロパティ、selectionEndプロパティのような直接位置を取得するようなメソッドやプロパティはありません。NNでの取得方法は、テキストエリアの選択範囲を取得するに載っています。 そこで自前で取得するしかないのがMicrosoftの陰謀です。 NNの場合は説明するまでもないので、ここから先の話しはIE限定です。 まず、位置といってもその用途によって以下の２通りがあります。 NNのように位置情報をsubstringメソッド等を使って処理を共通化させたい場合 IEのTextRangeオブジェクトのmoveStartメソッド、moveEndメソッドを使いたい場合 １番目、２番目とも求め方は変わらないのでほとんど共通ですが、まず１番目から説明します。 その前に、IEとNN
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
