Выберите все содержимое текстового поля, когда оно получает фокус (Vanilla JS или jQuery)

Question

Что такое решение Vanilla JS или jQuery, которое будет выделять все содержимое текстового поля, когда текстовое поле получает фокус?

Answer 1

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

Answer 2

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

Answer 3

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

Answer 4

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

Answer 5

Это не просто проблема Chrome / Safari, с Firefox 18.0.1 у меня было довольно похожее поведение. Самое смешное, что этого не происходит на MSIE! Проблема здесь в первом mouseup событии, которое заставляет отменить выбор входного содержимого, поэтому просто игнорируйте первый случай.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

Подход timeOut вызывает странное поведение, и, блокируя каждое событие mouseup, вы не можете удалить выделение, щелкая снова на элементе ввода.

Answer 6

jQuery - это не JavaScript, который в некоторых случаях более прост в использовании.

Посмотрите на этот пример:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

С CSS Trics .

Answer 7

мое решение - использовать тайм-аут. Кажется, работает нормально

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Answer 8

Это также будет работать на iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Answer 9

Ответы здесь помогли мне до некоторой степени, но у меня была проблема с полями ввода чисел HTML5 при нажатии кнопок вверх / вниз в Chrome.

Если вы нажмете одну из кнопок и оставите указатель мыши над кнопкой, число будет продолжать меняться, как если бы вы удерживали кнопку мыши, потому что указатель мыши отбрасывался.

Я решил эту проблему, удалив обработчик mouseup, как только он был запущен, как показано ниже:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Надеюсь, это поможет людям в будущем ...

Answer 10

Я знаю, что встроенный код - плохой стиль, но я не хотел помещать это в файл .js. Работает без jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>