デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.select( )文字が選択された時の処理を設定

構文

文字が選択された時の処理を設定返値:jQueryオブジェクト
jQo.select( function )ver1.0〜
jQo.select( )ver1.0〜
jQo.select( object, function )ver1.4.3〜

機能

textタイプのinput要素とtextarea要素において、文字が選択されたら引数のfunctionを実行します。また引数に何も設定しない場合は、セレクタのinput要素やtextarea要素の文字を選択することができます

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

フォーカスではなく「文字の選択」であることに注意してください。文字をドラッグしたりダブルクリックで選択した場合にイベントが発生します。

解説

文字が選択された時に実行する処理を設定

サンプル(select/01.html)を開いてbody内にtextタイプのinput要素とp要素があることを確認してください。

<input type="text" value="select me" />
<p></p>

jQueryは以下の様に記述され、selectメソッドの引数にfunctionの「selectFunc」が設定されています。

$(function () {
	$("input").select(selectFunc);
});

selectメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そして文字が選択されたら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

selectに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 文字が選択されたら実行したい処理
}

サンプルselect/01.htmlで利用したselectFuncは以下の様になっており、appendメソッドを利用してp要素に「select」と文字を追加します。このサンプルでは引数(イベントオブジェクト)は利用していません。

function selectFunc(eo) {
	$("p").append("select ");
};

結果として、input要素内にある文字を選択するたびに「select」と文字が追加されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(select/01b.html

$("input").select(function (eo) {
	$("p").append("select ");
});

input要素を選択(フォーカス)しただけではイベントが発生しないことに注意してください。ドラッグやダブルクリックで文字を選択しないとselectイベントは発生しません。

指定した要素の文字を選択する

selectメソッドは引数を設定しないと、セレクタのinput要素やtextarea要素の文字を選択することができます。 サンプル(select/02.html)を開いてbody内にbutton要素が追加されたことを確認してください。

続いてjQueryを確認してください。以下の様にbuttonをクリックしたらselectメソッドを引数なしで利用するようにしました。

$("button").click(function(){
	$("input").select();
});

結果として、buttonをクリックするとinput要素内の文字が選択されます。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(select/03.html)を開いてbody内の構成はselect/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、selectメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。この値をappendメソッドを利用してp要素に追加します。

$("input").select({test:10},function (eo) {
	$("p").append(eo.data.test + " ");
});

結果として、input要素の文字を選択するとp要素に第1引数で渡されたtestプロパティの値「10」が追加されます。

子孫要素の文字選択に対応しています

selectイベントはバブリングする(イベントが親要素へ伝わる)ため子孫要素の文字選択にも対応しています。
サンプル(select/04.html)を開いてbody内にform要素に囲まれたinput要素があることを確認してください。
select/01.htmlの構成にform要素を追加しただけです。

<form>
	<input type="text" value="select me" />
</form>

jQueryは以下の様に記述され、セレクタにform要素を指定しています。
selectメソッドの引数に設定したselectFuncはselect/01.htmlと同じです。

$(function () {
	$("form").select(selectFunc);
});

selectメソッドは子孫要素からのイベントを受け取るため、セレクタがform要素でもinput要素で発生したイベントを受け取りfunctionを実行します(イベントはバブリングで先祖要素に伝わっていきます)。その結果、テキストボックスの文字を選択するとselect/01.htmlと同じように機能します。イベントが伝わるのはイベントフローという仕組みで使い方でも紹介しています→参考:使い方「イベントフロー(1)」

メモ

選択された文字の抽出

文字を選択した時のイベントがあるのであれば、選択した文字を抽出するメソッドがあっても良さそうなのに見つかりませんでした。しかしjavaScriptでは選択した文字列を抽出するメソッドがあるのでサンプルを作成しました。ただしsafariやchromeのみでIEでは機能しないと思います(IEはたぶん別のメソッド)。

サンプル(select/test01.html)を開いてjQueryを確認してください。safariやchromeではgetSelectionメソッドを利用して簡単に選択された文字列を取得できます。

$("input").select(function (eo) {
	$("p").text(document.getSelection())
});

このサンプルではinput要素内で選択された文字列をp要素に表示します。

他の要素のに設定されたselectイベントの処理を実行すると...

フォームイベント等は引数にfunctionを設定しないことで、他の要素に設定されたfunctionを実行することができます。selectメソッドで、そのようなサンプルを作成したところfunctionが2回実行されてしまう現象があったのでメモしておきます。サンプル(select/test02.html)を開いてjQueryを確認してください。

サンプルselect/01b.htmlの処理に以下の処理を追加しただけです。この処理によりbuttonをクリックしても文字を選択したのと同じようにp要素に「select」と表示されるのですが...

$("button").click(function(){
	$("input").select();
});

結果としては、buttonをクリックするとp要素に「select」の文字が2回追加されてしまいます...。仕様なら仕様でいいのですが、同じことをfocusイベントで試すと、こちらは1回しか追加されません。これは良くないのでは?

focusイベントではbuttonをクリックしてもp要素に「focus」は1回しか追加されません。
→サンプル(focus/test03.html