web-dev-qa-db-ja.com

jqueryの入力すべてにフォーカスを合わせて選択

このコードを使用して、ユーザーがフィールドに焦点を合わせたときに、フィールド内のすべてのテキストを選択して選択します。何が起こるかというと、それは1秒間すべてを選択してから選択されていない状態で、タイプしたカーソルがクリックした場所に残っています...

$("input[type=text]").focus(function() {
   $(this).select();
});

すべて選択されたままにしておきたいです。

jqueryinput
307
Tim

clickの代わりにfocusを使用してみてください。マウスイベントとキーイベントの両方で機能するようです（少なくともChrome/Macでは）。

jQuery <バージョン1.7：

$("input[type='text']").click(function () {
   $(this).select();
});

jQueryバージョン1.7以降：

$("input[type='text']").on("click", function () {
   $(this).select();
});

これがデモです

453
karim79

私は起こることがこれであると思います：

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

回避策はselect（）を非同期に呼び出して、それがfocus（）の後に完全に実行されるようにすることです。

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});
65
Piskvor

私はこれがより良い解決策だと思います。単にonclickイベントで選択するのとは異なり、マウスでテキストを選択/編集するのを妨げることはありません。それはIE8を含む主要なレンダリングエンジンで動作します。

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

54
user2072367

ここにいくつかのまともな答えがあり、@ user2072367が私のお気に入りですが、クリックではなくタブを介してフォーカスすると、予期しない結果になります。 （予期しない結果：タブを介してフォーカスした後にテキストを通常選択するには、もう一度クリックする必要があります）

このフィドル はその小さなバグを修正し、さらに冗長なDOM選択を避けるために$（this）を変数に格納します。見てみな！ （：

IE> 8でテスト済み

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});
36
animatedgif

慎重に検討した後、私はこのスレッド内のはるかにクリーンな解決策としてこれを提案します。

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

jsFiddleでのデモ

問題：

これが少し説明です。

まず、フィールドにマウスまたはタブで移動したときのイベントの順序を見てみましょう。
このように、関連するすべてのイベントを記録できます。

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

focus events

注：イベントパイプラインの後半で発生するので、この解決法をclickではなくmouseupを使用するように変更し、@ Jocieのコメントに従ってFirefoxでいくつかの問題を引き起こしているようです。

ブラウザによっては、mouseupまたはclickイベント中にカーソルを移動しようとします。キャレットを1つの位置から開始し、上にドラッグしてテキストをハイライト表示することをお勧めします。実際にマウスを持ち上げるまで、キャレットの位置を指定することはできません。そのため、focusを処理する関数は応答が早すぎてブラウザがあなたの位置を上書きするようになってしまいます。

しかし、問題は、フォーカスイベントを本当に処理したいということです。誰かがその分野に初めて参入したことを知ることができます。それ以降は、ユーザー選択の動作を上書きし続けたくはありません。

ソリューション：

代わりに、focusイベントハンドラ内で、発生させようとしているclick（クリックイン）およびkeyup（タブイン）イベントのリスナーをすばやく添付できます。

注：タブイベントのキー入力は実際には 前の入力フィールドではなく 新しい入力フィールドで発生します。 ）

私たちは一度だけイベントを発生させたいのです。 .one("click keyup)を使うこともできますが、これは 各イベントタイプに対して一度だけイベントハンドラを呼び出します 。代わりに、mouseupまたはkeyupが押されるとすぐに、この関数を呼び出します。最初にすることは、両方のハンドラを削除することです。そうすれば、タブで移動したかマウスで移動したかは関係ありません。関数は1回だけ実行する必要があります。

注：ほとんどのブラウザは、タブイベント中に自然にすべてのテキストを選択しますが、 animatedgifが指摘したように 、それでもkeyupイベントを処理したいのであれば、タブインしたときはいつでもmouseupイベントが引き続き発生します。両方を聞いているので、選択を処理したらすぐにリスナーをオフにすることができます。

これで、ブラウザが選択した後にselect()を呼び出すことができるので、デフォルトの動作をオーバーライドすることになります。

最後に、保護を強化するために、 イベントの名前空間 をmouseupおよびkeyup関数に追加して、.off()を作成することができます。 methodは、プレイ中の他のリスナーを削除しません。

IE 10+、FF 28+、Chrome 35+でテスト済み

あるいは、jQueryをonceという 関数で拡張したい場合は、任意の数のイベントに対して正確に1回起動します 。

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

そうすれば、コードをさらに単純化することができます。

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

フィドルのデモ

20
KyleMit

これにより作業が行われ、テキストの一部をマウスで選択できなくなるという問題を回避できます。

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});
13
Nianpeng

このバージョンは、IOS上で動作し、またWindowsのクロム上で選択するための標準のドラッグを修正します

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

6
anihilnine

これらの解決策のほとんどに伴う問題は、入力フィールド内のカーソル位置を変更するときにそれらが正しく機能しないことです。

onmouseupイベントはフィールド内のカーソル位置を変更します。これはonfocusの後に発生します（少なくともChromeとFFの場合）。無条件にmouseupを破棄した場合、ユーザーはマウスでカーソル位置を変更できません。

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

フィールドが現在フォーカスを持っていない場合、コードは条件付きでmouseupのデフォルトの動作を妨げます。それはこれらの場合にはたらきます：

  • フィールドがフォーカスされていないときにクリックする
  • フィールドにフォーカスがあるときにクリック
  • フィールドにタブ

Chrome 31、FF 26、およびIE 11でテストしました。

5
Colin Breame

このスレッドを読む 素晴らしい解決策が見つかりました

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});
4
RafaelTSCS

私は2016年末から来ていて、このコードは最近のバージョンのjquery（この場合はjquery-2.1.3.js）で動作します。

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}
2
Aaron
var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

2つの入力をすばやく切り替える場合は、セキュリティを高めるためにclearTimeoutを使用してください。clearTimeoutは古いタイムアウトを消去します。

2
asimov

あるいは<input onclick="select()">を使えば完璧です。

1
tectiv3

私はFF 16.0.2とjquery 1.8.3を使っていますが、答えの中のコードはすべてうまくいきませんでした。
私はこのようなコードを使って仕事をしています。

$("input[type=text]").focus().select();
1
GusDeCooL
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
0
trikon

簡単なコードを使うことができます。

$('#idname').select();
0
Rubén Ruíz

ネイティブのJavaScript select()とうまく動作します。

$("input[type=text]").focus(function(event) {
   event.currentTarget.select();
});

または一般的に：

$("input[type=text]")[0].select()
0
Tobi G.