Hatena::ブログ(Diary)

今日も適当ダイアリー このページをアンテナに追加 RSSフィード Twitter

このブログは http://blog.madapaja.net/ に移転しました。

2010-09-17

選択範囲のテキストを操作するjQueryプラグインjQuery.selection


以下の内容は、古い内容です。

新しい記事で情報を確認してください。


選択範囲のテキストを操作するためのjQueryプラグイン jQuery.selection を書いたので、アップしました。

IE6やFireFox3.5、Google Chrome 6など主要なブラウザでチェック済みです。

f:id:ja9:20100917192023p:image

ファイルはこちら

http://jquery-selection.googlecode.com/svn/tags/(URLが間違っていたため訂正しました)

http://code.google.com/p/jquery-selection/downloads/list (圧縮ファイル)

デモはこちら

jQuery.selection - jQuery Plugin DEMO

簡単な説明

$.getSelection([mode = 'text'])
HTMLドキュメント内の選択されたテキスト/HTMLを取得する
getSelection()
テキストボックス/エリアの選択されたテキストを取得する
replaceSelection(text[, caret = 'keep'])
テキストボックス/エリアの選択されたテキストを置換する
insertBeforeSelection(text[, caret = 'keep'])
テキストボックス/エリアの選択されたテキストの前に文字列を挿入する
insertAfterSelection(text[, caret = 'keep'])
テキストボックス/エリアの選択されたテキストの後に文字列を挿入する
getCaretPos()
テキストボックス/エリアの選択範囲を取得する
setCaretPos(range)
テキストボックス/エリアの選択範囲を設定する

デモも併せてご確認ください。


$.getSelection([mode = 'text'])

HTMLドキュメント内の選択されたテキスト/HTMLを取得する

mode

modeには、'text'もしくは'html'を指定します。

指定しなかった場合は、'text'となります。

返り値

String型で mode に指定した値によって、選択されたテキストか、HTMLテキストが返ります。


getSelection()

テキストボックス/エリアの選択されたテキストを取得する

返り値

String型で選択されたテキストが返ります。


replaceSelection(text[, caret = 'keep'])

テキストボックス/エリアの選択されたテキストを置換する

text

置換後の文字列を指定します。

caret

caretには'keep'か'start'、'end'のいずれかを指定します。

指定しなかった場合は、'keep'となります。

keep
選択範囲を保持します。(指定したtextが選択状態となります)
start
キャレットを選択範囲の最初に移動します
end
キャレットを選択範囲の後ろに移動します

insertBeforeSelection(text[, caret = 'keep'])

テキストボックス/エリアの選択されたテキストの前に文字列を挿入する

text

挿入する文字列を指定します。

caret

caretには'keep'か'start'、'end'のいずれかを指定します。

指定しなかった場合は、'keep'となります。

keep
選択範囲を保持します。
start
キャレットを選択範囲の最初に移動します
end
キャレットを選択範囲の後ろに移動します

insertAfterSelection(text[, caret = 'keep'])

テキストボックス/エリアの選択されたテキストの後に文字列を挿入する

text

挿入する文字列を指定します。

caret

caretには'keep'か'start'、'end'のいずれかを指定します。

指定しなかった場合は、'keep'となります。

keep
選択範囲を保持します。
start
キャレットを選択範囲の最初に移動します
end
キャレットを選択範囲の後ろに移動します

getCaretPos()

テキストボックス/エリアの選択範囲を取得する

返り値

Object型 {start: 選択開始位置, end: 選択終了位置} で選択範囲が返ります。

var pos = $('textarea').getCaretPos();
alert(''+ pos.start + ' から ' + pos.end + 'までが選択されています。');

setCaretPos(range)

テキストボックス/エリアの選択範囲を設定する

range

Object型 {start: 選択開始位置, end: 選択終了位置} で選択範囲を指定します。

var strLen = $('textarea').val().length; // 文字数を取得

// 全て選択します
$('textarea').setCaretPos({
  start: 0,     // 最初から
  end  : strLen // 最後まで
});

ファイルはこちら

http://jquery-selection.googlecode.com/svn/tags/(URLが間違っていたため訂正しました)

http://code.google.com/p/jquery-selection/downloads/list (圧縮ファイル)

デモはこちら

jQuery.selection - jQuery Plugin DEMO

izmmizmm 2011/03/09 12:18 ステキなプラグインですね。
1点お尋ねします。
テキストなり、キャレット位置なりを取得する対象が「テキストボックス/エリア」に限定されていますが、
入力可能にした状態のdivタグ内やbodyタグ内でもこちらのプラグインの機能を使いたいのですが、可能でしょうか。
せっかくいいものなので、そちらでも使えると万能なのですが。。。

sinnitisinniti 2011/05/06 09:13 min じゃない方のファイルを使うと正しく取得できない。。
返ってくる値が start は 0 の値が返ってきます。

三太郎三太郎 2011/05/29 16:51 素晴らしいプラグインです。参考にさせていただきました。
divでもbodyでも選択できました。ただ <textarea>はOKなの
ですが<input type=text > ではうまく取得できませんでした。

ja9ja9 2011/06/06 21:18 メンテしてなくてすみません。

> テキストなり、キャレット位置なりを取得する対象が「テキストボックス/エリア」に限定されていますが、
> 入力可能にした状態のdivタグ内やbodyタグ内でもこちらのプラグインの機能を使いたいのですが、可能でしょうか。

contenteditable 属性を付けたdivやbodyでもイける気がするのですが、
試していないので何とも言えないです。。。
近いうちに試してみます。

> min じゃない方のファイルを使うと正しく取得できない。。
> 返ってくる値が start は 0 の値が返ってきます。

<script charset="utf-8" src="...">のように、scriptを読み込むときに、
UTF-8を指定すると回避できるかと思います。
指定しないで読み込んだ際に、Shift_JISとして読み込まれると、
文字&改行コードの関係で、コメント行と認識される場合があり、
start値を取得している1行が失われるようで。。。
次回更新時に対応しますが、それまでは、上記の対策でお願いします。

> ですが<input type=text > ではうまく取得できませんでした。
どのメソッドがうまくいかなかったでしょうか?
分かれば原因を調査しようと思います。

宜しくお願いします。

名前名前 2011/09/17 02:02 素晴らしいプラグインを見つけてワックワクで実装したのですが、
前の方達もおっしゃっているように、IE6でinput type="text"の場合のみキャレット位置が取得出来ず常に0が返って来ます。
replaceSelectionやgetCaretPosで試しましたが、取得出来るようになりますでしょうか?

ja9ja9 2011/09/20 10:42 > 前の方達もおっしゃっているように、IE6でinput type="text"の場合のみキャレット位置が取得出来ず常に0が返って来ます。
> replaceSelectionやgetCaretPosで試しましたが、取得出来るようになりますでしょうか?

IE系で input type=text の要素へのキャレット位置取得できない件、状況が確認できました。
なんとなく、怪しい部分を発見したものの、詳しく見てみないと何とも言えないので
もうちょっとお待ちいただければと。。。

(o・・o)/(o・・o)/ 2011/10/10 06:28 同じくこちらは、IE8で動かして見ましたがgetCaretPos()が値を返してくれないようです。<input type="text" で値が返ってきません。textareaは返ってきます・・・。がんばって〜(o・・o)/

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/ja9/20100917/1284146159