ywork2020.com

Title

要素にセレクトイベントを登録する

目次 (INDEX)

selectとは

ここで説明する select とは次の語句からなるjQueryのメソッドです。
select
読み: セレクト
意味: 選ぶ、選択

目次に戻る

selectメソッドの概要

このメソッドは、セレクタに該当する既存入力要素にセレクトイベントをバインドします。 また、メソッドの引数を空にした場合にはセレクタに該当する入力要素の文字列を選択します。

セレクトイベントは、入力要素に入力してある文字列をカーソルで選択すると発生します。

このメソッドの呼び出し元は input要素 や textarea要素になります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

Selector.select(Handler(EventObject));
Selector.select([EventData], Handler(EventObject));
Selector.select();
  • 01: セレクトイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクターに該当する入力要素の文字列を選択します。これにより、既にバインドされているセレクトイベントは実行されます。

目次に戻る

サンプルコードと実行結果

ここでは、input要素に入力されているテキストをユーザーがマウスポインターを使って選択すると、 自動的にクリップボードに内容がコピーされるものを作ってみました。

サンプルコード: CSS 
<style>
	#idDiv{
		display: none;
		position: fixed;
		top: 40%;
		left: 40%;
		background-color: ##lightpink;
		font-size: larger;
		padding: 1em;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<p><input type="text" value="コピー用テキスト" id="idText"></p>
	<p><textarea></textarea ></p>
	<div id="idDiv">選択範囲がコピーされました</div>
	<script>...</script>
</body>
  • 06: input (この入力要素のテキスト選択範囲を自動でクリップボードにコピーします。)
  • 07: textarea (試験用の要素です。コピーされたテキストの貼付をお試しください。)
  • 08: div (コピーされたことを通知するための要素です。初期設定ではCSSで非表示にしています。)
サンプルコード: script 
<script>
	$("#idText").select(function(event){
		document.execCommand("copy");
		$("#idDiv").fadeIn(0).fadeOut(800);
	});
</script>
  • 02-05: select(Handler(EventObject){処理}) (セレクトイベントを登録しています。このイベントが発生するとハンドラーの処理が実行されます。)
  • 03: document.execCommand("copy") (クリップボードにコピーするためのコマンドです。これはいずれ実装されなくなるメソッドですので使用はお控えください。ただ、これに変わる技術が確立されるまではブラウザはこの機能を実装するでしょう。)
  • 04: .fadeIn(0).fadeOut(800) (非表示の要素を表示してからフェードアウトしています。)
実行結果:

選択範囲をクリップボードにコピーします

貼付てお試しください:

選択範囲がコピーされました

目次に戻る