Выделение всего текста в текстовом вводе HTML при нажатии - PullRequest
Новая
       8

Выделение всего текста в текстовом вводе HTML при нажатии

480 голосов
/ 01 ноября 2010

У меня есть следующий код для отображения текстового поля на веб-странице HTML. 

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Когда отображается страница, текст содержит Пожалуйста, введите сообщение ID пользователя .Однако я обнаружил, что пользователю нужно нажать 3 раза, чтобы выделить весь текст (в данном случае это Пожалуйста, введите идентификатор пользователя ).

Можно ли выделить весь текст одним щелчком мыши?

Редактировать:

Извините, я забыл сказать: я должен использоватьвход type="text"

Ответы [ 22 ]

0 голосов
/ 27 января 2017

Если вы просто пытаетесь получить замещающий текст, который заменяется, когда пользователь выбирает элемент, то, очевидно, в настоящее время рекомендуется использовать атрибут placeholder. Однако, если вы хотите выбрать все текущее значение, когда поле получает фокус, комбинация ответов @Cory House и @Toastrackenigma представляется наиболее канонической. Используйте события focus и focusout с обработчиками, которые устанавливают / освобождают текущий элемент фокуса, и выбирают все, когда фокус. Пример angular2 / typcript выглядит следующим образом (но было бы тривиально преобразовать его в vanilla js):

Шаблон: 

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Компонент: 

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};
0 голосов
/ 15 июля 2015

Если кто-то захочет сделать это при загрузке страницы с помощью jQuery (просто для полей поиска), вот мое решение 

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Основано на этой записи.Спасибо CSS-Tricks.com

Страница:
...