<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selection/1.0.1/jquery.selection.js"></script></script> <script type="text/javascript"> $(function(){ $("#text") .css({ float: "left", width: "400px", height: "200px" }); $("#insert1") .attr("type", "button") .val("前へ挿入") .css({ display: "block" }) .click(function(){ $("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" }) }); $("#insert2") .attr("type", "button") .val("後へ挿入") .css({ display: "block" }) .click(function(){ $("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" }) }); $("#replace") .attr("type", "button") .val("置き換え") .css({ display: "block" }) .click(function(){ $("#text").selection("replace",{ text: "文字列", caret: "keep" }) }); $("#get") .attr("type", "button") .val("取り出し") .css({ display: "block" }) .click(function(){ alert( $("#text").selection("get") ) }); $("#get_text") .attr("type", "button") .val("選択部分の text 取り出し") .css({ display: "block" }) .click(function(){ alert( $.selection("text") ) }); $("#get_html") .attr("type", "button") .val("選択部分の html 取り出し") .css({ display: "block" }) .click(function(){ alert( $.selection("html") ) }); }); </script> <b>ここを選択して <span>html</span> 取り出しすると</b><br><br> <textarea id="text">aaa bbb ccc</textarea> ▼ テキストエリア内限定 <input id="insert1"> <input id="insert2"> <input id="replace"> <input id="get"> ▼ ページ全体に対しての処理 <input id="get_text"> <input id="get_html">
ここを選択して html 取り出しするとテキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。 使用可能なメソッドは 5つ 1) getPos 2) setPos 3) insert 4) replace 5) get get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。 insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。 ページ全体で使用可能 selection メソッド こちらは、text か html かで選択部分の情報を取得します
▼ テキストエリア内限定 ▼ ページ全体に対しての処理
関連する記事 ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。