jquery input select all on focus

Question

Ich verwende diesen Code, um zu versuchen, den gesamten Text im Feld auszuwählen, wenn ein Benutzer den Fokus auf das Feld legt. Was passiert, ist, es wählt alle für eine Sekunde, dann seine unselected und der Eingabe-Cursor ist links, wo ich geklickt habe...

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

Ich möchte, dass alles ausgewählt bleibt.

Answer 1

Dies würde die Arbeit erledigen und das Problem vermeiden, dass Sie einen Teil des Textes nicht mehr mit der Maus auswählen können.

$("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");
    }
});

Answer 2

Diese Version funktioniert auf iOS und behebt auch das standardmäßige Ziehen zum Auswählen auf Windows Chrome

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/

Answer 3

Das Problem bei den meisten dieser Lösungen ist, dass sie nicht korrekt funktionieren, wenn sich die Position des Cursors innerhalb des Eingabefeldes ändert.

En onmouseup ändert die Position des Cursors innerhalb des Feldes, was nach onfocus (zumindest in Chrome und FF). Wenn Sie die Option "Bedingungslos verwerfen mouseup dann kann der Benutzer die Position des Cursors nicht mit der Maus verändern.

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"));

Der Code verhindert bedingt, dass die mouseup Standardverhalten, wenn das Feld derzeit keinen Fokus hat. Es funktioniert in diesen Fällen:

• Klicken, wenn das Feld nicht fokussiert ist
• Klicken, wenn das Feld den Fokus hat
• Tabulator in das Feld

Ich habe dies in Chrome 31, FF 26 und IE 11 getestet.

Answer 4

Eine großartige Lösung gefunden dieses Thema

$(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);
        });
    }
});

Answer 5

Ich komme von Ende 2016 und dieser Code funktioniert nur in neueren Versionen von jquery (jquery-2.1.3.js in diesem Fall).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}