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

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

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

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

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

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

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

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

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

Ответы [ 22 ]

3 голосов
/ 11 апреля 2018

Вы можете заменить 

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

С: 

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

Заполнитель используется для замены значения как того, что вы хотели, чтобы люди могли вводить в текстовое поле, не нажимая несколько раз или используя ctrl + a. Заполнитель делает это так, что это не значение, а, как следует из названия, заполнитель. Это то, что используется в нескольких онлайн-формах с надписью «Имя пользователя здесь» или «Электронная почта», и когда вы нажимаете на нее, «Электронная почта» исчезает, и вы можете сразу же начать печатать.

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

Вот повторная версия ответа Шобана: 

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

Таким образом, вы можете повторно использовать сценарий очистки для нескольких элементов.

2 голосов
/ 12 октября 2015

HTML, как это <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

и код JavaScript без привязки 

function textSelector(ele){
    $(ele).select();
}
2 голосов
/ 02 декабря 2013

Этот вопрос имеет варианты, когда .select () не работает на мобильных платформах: Программный выбор текста в поле ввода на устройствах iOS (Safari для мобильных устройств)

2 голосов
/ 07 октября 2013

Проблема с перехватом события click заключается в том, что каждый последующий щелчок в тексте будет выделять его снова, тогда как пользователь, вероятно, ожидал изменить положение курсора.

Для меня работало объявление переменной selectSearchTextOnClickи установив его в true по умолчанию.Обработчик щелчка проверяет, что переменная по-прежнему истинна: ​​если она есть, она устанавливает ее в ложь и выполняет select ().Затем у меня есть обработчик событий размытия, который устанавливает его в значение true.

Результаты до сих пор выглядели так, как я ожидал.

(Правка: я забыл сказать, что пыталсяперехват события фокуса, как кто-то предложил, но это не работает: после того, как событие фокуса сработало, событие щелчка может сработать, немедленно отменив выбор текста).

2 голосов
/ 24 июля 2018

Примечание: При рассмотрении onclick="this.select()", при первом щелчке будут выбраны все символы. После этого, возможно, вы захотите отредактировать что-либо во вводе и щелкнуть среди символов, после чего он снова выберет все символы , Чтобы решить эту проблему, вы должны использовать onfocus вместо onclick.

2 голосов
/ 13 июля 2018

Вот пример в React, но он может быть переведен в jQuery на vanilla JS, если вы предпочитаете: 

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

Хитрость здесь в том, чтобы использовать onMouseDown, поскольку элемент уже получил focus к тому времени, когда срабатывает событие «click» (и, таким образом, проверка activeElement завершится неудачей).

Проверка activeElement необходима, чтобы пользователь мог расположить курсор в нужном месте безпостоянно повторно выбирая весь ввод.

Время ожидания необходимо, потому что в противном случае текст будет выделен, а затем мгновенно отменен, как я полагаю, браузер выполняет проверку позиционирования курсора после слов.

Инаконец, el = ev.currentTarget необходим в React , потому что React повторно использует объекты событий, и вы потеряете синтетическое событие к моменту запуска setTimeout.

1 голос
/ 26 июня 2015

Используйте «заполнитель» вместо «значение» в поле ввода.

1 голос
/ 01 ноября 2010

Ну, это обычная активность для TextBox.

Нажмите 1 - Установить фокус

Нажмите 2/3 (двойной щелчок) - выберите текст

Вы можете установить focus на TextBox при первой загрузке страницы, чтобы уменьшить «select» до одного события двойного щелчка.

0 голосов
/ 26 июня 2015

Если вы используете AngularJS, вы можете использовать пользовательскую директиву для легкого доступа: 

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Теперь можно просто использовать ее так: 

<input type="text" select-on-click ... />

requirejs - поэтому первая и последняя строка могут быть пропущены при использовании чего-либо еще.

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