テキストフィールドjQueryを使用してすべての/場所カーソルを選択

Question

私は値があらかじめ入力された編集フォームのテキストフィールドを持っています。私はそれを次の動作をさせていただきたいと思います。テキストフィールド内の

• クリックすると、自動的にすべてのコンテンツを選択解除し、ユーザーが
をクリックする位置にカーソルを置き全体の内容
• がエリア内もう一度クリック選択します

は、ここに私のコードです：ユーザーがフィールドをクリックしたときに

// HTML 
<input type="text" class="clickToSelect" value="myText" /> 

// jQuery 
$(".clickToSelect").click(function(){ 
    $(this).select(); 
}) 

は今、すべてのテキストが選択されているが、彼らはセコをクリックすると、すべてのテキストがまだ選択されている時間。任意のアイデアをどのように私は2回目のクリックでテキストの選択を解除し、カーソルを置くことができますか？

Answer 1

このような何か？

$(".clickToSelect").click(function(){ 
     if(!$(this).hasClass("click-selectall")){ 
      $(this).addClass("click-selectall"); 
      $(this).select(); 
     } 
    }); 

    $(".clickToSelect").blur(function(){ 
     $(this).removeClass("click-selectall"); 
    }) 

Answer 2

$(".clickToSelect").one('click', function(){ 
    $(this).select(); 
}) 

Working fiddle here.

更新：複数Clicky-Worky：

$(".clickToSelect").click(function(){ 
    $this = $(this); // cache $(this) for better performance 
    if (!$this.data('selected')) 
    { 
     $this.data('selected', true); 
     $this.select(); 
    } 
}).blur(function(){ 
    $this.data('selected', false); 
}); 

Fiddle

Answer 3

$.fn.slctText = function(start, end){ 

     var field = $J(this); 
     if(field.createTextRange){ 
      var selRange = field.createTextRange(); 
      selRange.collapse(true); 
      selRange.moveStart("character", start); 
      selRange.moveEnd("character", end); 
      selRange.select(); 
     } else if(field.setSelectionRange){ 
      field.setSelectionRange(start, end); 
     } else { 
      if(field.selectionStart){ 
       field.selectionStart = start; 
       field.selectionEnd = end; 
      } 
     } 
     return $(this); 
} 

$.fn.setCurPos = function(pos){ 

     $(this).slctText(pos,pos); 
     $(this).focus(); 
} 

両方のプラグインがそれを.USEあります。