回答:
ユーザーがマウスを使用してキャレットを移動しようとするたびにテキスト全体が選択されたときにユーザーが煩わしくならないようにするには、focus
イベントではなくイベントを使用してこれを行う必要がありますclick
。次の方法で処理を行い、Chromeで最も単純なバージョン(つまりselect()
、focus
イベントハンドラーでtextareaのメソッドを呼び出すだけ)が機能しないという問題を回避します。
jsFiddle:http ://jsfiddle.net/NM62A/
コード:
<textarea id="foo">Some text</textarea>
<script type="text/javascript">
var textBox = document.getElementById("foo");
textBox.onfocus = function() {
textBox.select();
// Work around Chrome's little problem
textBox.onmouseup = function() {
// Prevent further mouseup intervention
textBox.onmouseup = null;
return false;
};
};
</script>
jQueryバージョン:
$("#foo").focus(function() {
var $this = $(this);
$this.select();
// Work around Chrome's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});
tab
が、テキストエリアに入ると失敗します-他の解決策は両方のケースで機能します:)
$("#foo").mouseup(function() {
$("#foo").unbind("mouseup");
return false;
});
あなたは使用せずにテキストボックスを参照する必要がthis
フルパスでそれを参照するだけで...それが動作します...
タブとクロムの問題の解決策と新しいjqueryの方法によるより良い方法
$("#element").on("focus keyup", function(e){
var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if(keycode === 9 || !keycode){
// Hacemos select
var $this = $(this);
$this.select();
// Para Chrome's que da problema
$this.on("mouseup", function() {
// Unbindeamos el mouseup
$this.off("mouseup");
return false;
});
}
});
私はこれを使ってしまいました:
$('.selectAll').toggle(function() {
$(this).select();
}, function() {
$(this).unselect();
});
readonly
次に、属性を追加して、読み取り専用にすることができます。
少し短いjQueryバージョン:
$('your-element').focus(function(e) {
e.target.select();
jQuery(e.target).one('mouseup', function(e) {
e.preventDefault();
});
});
Chromeのコーナーケースを正しく処理します。例については、http://jsfiddle.net/Ztyx/XMkwm/を参照してください。
:)
その投稿で受け入れられた回答を使用して、次のような関数を呼び出すことができます。
$(function() {
$('#textareaId').click(function() {
SelectText('#textareaId');
});
});
$(this).select()
使用してこれを実行できることがわかりました。コードが少ないため、これを使用します:)