コンユウメモ @kon_yu

作ったガラクタとか、旅行とかの話

クリックしたタグの領域を選択状態にする(jQuery対応)

texAreaやformのtextboxを選択状態にするのではなくて、普通のDIVタグや、Pタグで囲まれた領域を、クリック時に全選択させたいことはないだろうか?オレはある

正確にはあった、仕事でこのボツったので死蔵させるのも何なので誰かの役に立てばと思う。
動作するサンプルコードも付いているので、参考にして欲しい

実装はjQueryだけでは実装することは出来ず、javascriptの素のものを使わなければならなかった。しかしjQueryセレクタやクリックイベントを利用して使えるようにした。

サンプルコードで定義してあるselectDomElmメソッドを使えば、jQueryで指定したクリックや、チェックボックスのセレクトなどもろもろのイベントで流用できる

サンプルコードはこちら、更に下方に動作確認できる環境を本稿にembedしてある

$(function(){
  // クラス選択
  $('.selectedClass').click(function(){
    selectDomElm(this);
  });

  // もちろんIDにも対応可
  $('#selectedID').click(function(){
    selectDomElm(this);
  });
});

// ココがポイントjavascript
function selectDomElm(obj){
  // Rangeオブジェクトの取得
  var range = document.createRange();
  // 範囲の指定
  range.selectNodeContents(obj);

 // Selectionオブジェクトを返す。ユーザが選択した範囲が格納されている
  var selection = window.getSelection();
  // 選択をすべてクリア
  selection.removeAllRanges();
 // 新規の範囲を選択に指定
  selection.addRange(range);
}

動作確認

refs: