У меня есть следующий код для отображения текстового поля на веб-странице HTML.
<input type="text" id="userid" name="userid" value="Please enter the user ID" />
Когда отобразится страница, текст содержит сообщение « Пожалуйста, введите идентификатор пользователя» . Тем не менее, я обнаружил, что пользователь должен нажать 3 раза, чтобы выделить весь текст (в этом случае, пожалуйста, введите идентификатор пользователя ).
Можно ли выделить весь текст одним щелчком мыши?
Редактировать:
Извините, я забыл сказать: я должен использовать вход type="text"
javascript
html
textinput
Вопросов
источник
источник
<label>
для метки, а не дляvalue
. Вы можете использовать JS и CSS, чтобы он выглядел одинаково, но не был таким антисемантическим. dorward.me.uk/tmp/label-work/example.html содержит пример использования jQuery.Ответы:
Вы можете использовать этот фрагмент JavaScript:
Но, очевидно, он не работает на мобильном Safari. В этих случаях вы можете использовать:
источник
this.id
в качестве аргумента для обработчика кликов. А еще лучше, вы можетеgetElementById
полностью исключить и передатьthis
в качестве аргумента.this.setSelectionRange(0, this.value.length)
вместо этого.Ранее опубликованные решения имеют две особенности:
Вот полное решение, которое выделяет весь текст в фокусе, но позволяет выбрать конкретную точку курсора после фокуса.
источник
.on('blur', 'input', function(){focusedElement = null;})
0
работ для меня в Chrome и Firefox. не уверен, откуда50
исходит ваше время ожидания .Html (вам нужно поместить атрибут onclick на каждый ввод, для которого он будет работать на странице)
ИЛИ ЛУЧШИЙ ВАРИАНТ
JQuery (это будет работать для каждого ввода текста на странице, не нужно менять свой HTML):
источник
Я знаю, что это старая версия, но лучше всего использовать новый
placeholder
атрибут HTML, если это возможно:Это приведет к отображению текста до тех пор, пока не будет введено значение, что устраняет необходимость выбора текста или очистки вводимых данных.
источник
Приведенные ответы являются частичными, по моему мнению. Ниже я привел два примера того, как сделать это в Angular и с JQuery.
Это решение имеет следующие особенности:
JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview
Angular: http://plnkr.co/edit/llcyAf?p=preview
источник
Пытаться:
Это прекрасно работает для меня.
источник
Вы всегда можете использовать
document.execCommand
( поддерживается во всех основных браузерах )Выделяет весь текст в текущем элементе.
источник
<input type="text" onclick="document.execCommand('selectall',null,false);" />
contenteditable
элементов, а также. Я думаю, что вы также можете сделать это даже немного более элегантным, то есть<input type="text" onfocus="document.execCommand('selectall')">
- уверен, что вы можете удалитьnull
и,false
если вы не используете их.onfocus
кажется лучше чемonclick
. и да, можно покончить сnull
иfalse
. Спасибо!onfocus
вся страница выбирается при нажатии на ввод в Chrome.onclick
работает отлично.автофокус ввода, с событием onfocus:
Это позволяет открыть форму с выбранным элементом. Он работает с помощью автофокуса для нажатия на вход, который затем отправляет себе событие onfocus, которое, в свою очередь, выделяет текст.
источник
Примечание. Если учесть
onclick="this.select()"
, что при первом щелчке будут выбраны все символы, после этого, возможно, вы захотите отредактировать что-либо во вводе и снова щелкнуть среди символов, но он снова выберет все символы. Чтобы решить эту проблему, вы должны использоватьonfocus
вместоonclick
.источник
В самом деле, используйте,
onclick="this.select();"
но помните, чтобы не комбинировать его с нимdisabled="disabled"
- тогда он не будет работать, и вам все равно придется выбрать его вручную или щелкнуть несколько раз. Если вы хотите заблокировать значение содержимого для выбора, объедините его с атрибутомreadonly
.источник
Вот многоразовая версия ответа Шобана:
Таким образом, вы можете повторно использовать сценарий очистки для нескольких элементов.
источник
Вы можете заменить
С:
Заполнитель используется для замены значения как того, как вы хотели, чтобы люди могли вводить текст в текстовом поле, не нажимая несколько раз или используя ctrl + a. Заполнитель делает это так, что это не значение, а, как следует из названия, заполнитель. Это то, что используется в нескольких онлайн-формах с надписью «Имя пользователя здесь» или «Электронная почта», и когда вы нажимаете на нее, «Электронная почта» исчезает, и вы можете сразу же начать печатать.
источник
Точное решение того, что вы спросили:
Но я полагаю, вы пытаетесь показать «Пожалуйста, введите идентификатор пользователя» в качестве заполнителя или подсказки при вводе. Таким образом, вы можете использовать следующее как более эффективное решение:
источник
Вот пример в React, но он может быть переведен в jQuery на vanilla JS, если вы предпочитаете:
Хитрость здесь в том, чтобы использовать,
onMouseDown
потому что элемент уже получил фокус к моменту запуска события click (и, таким образом,activeElement
проверка не пройдёт).activeElement
Проверка необходима для того , чтобы они пользователь может поместить их курсор туда , где они хотят , без необходимости постоянно повторно выбрать весь вход.Тайм-аут необходим, потому что в противном случае текст будет выделен, а затем мгновенно отменен, так как я предполагаю, что браузер выполняет проверку позиционирования курсора после слов.
И, наконец,
el = ev.currentTarget
это необходимо в React, потому что React повторно использует объекты событий, и вы потеряете синтетическое событие к моменту запуска setTimeout.источник
Проблема с перехватом события click состоит в том, что каждый последующий щелчок в тексте будет выбирать его снова, тогда как пользователь, вероятно, ожидал изменить положение курсора.
Для меня работало объявление переменной selectSearchTextOnClick и установка ее в значение true по умолчанию. Обработчик щелчка проверяет, что переменная по-прежнему истинна: если она есть, она устанавливает ее в ложь и выполняет select (). Затем у меня есть обработчик событий размытия, который возвращает его в значение true.
Результаты пока что выглядят так, как я ожидал.
(Изменить: я не упомянул, что пытался поймать событие фокуса, как кто-то предложил, но это не сработало: после того, как событие фокуса сработало, событие щелчка может сработать, немедленно отменив выбор текста).
источник
В этом вопросе есть варианты, когда .select () не работает на мобильных платформах: программный выбор текста в поле ввода на устройствах iOS (Safari для мобильных устройств)
источник
HTML, как это
<input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>
и код JavaScript без привязки
источник
Ну, это нормальная деятельность для TextBox.
Нажмите 1 - установить фокус
Нажмите 2/3 (двойной щелчок) - выберите текст
Вы можете установить фокус на TextBox при первой загрузке страницы, чтобы уменьшить «select» до одного события двойного щелчка.
источник
Используйте «заполнитель» вместо «значение» в поле ввода.
источник
Если вы используете AngularJS, вы можете использовать пользовательскую директиву для быстрого доступа:
Теперь можно просто использовать это так:
Пример с requirejs - поэтому первая и последняя строка могут быть пропущены, если используется что-то еще.
источник
Если кто-то хочет сделать это при загрузке страницы с помощью jQuery (просто для полей поиска), вот мое решение
На основании этого поста. Благодаря CSS-Tricks.com
источник
Если вы просто пытаетесь получить замещающий текст, который будет заменен, когда пользователь выбирает элемент, то, очевидно, в
placeholder
настоящее время рекомендуется использовать атрибут. Однако, если вы хотите выбрать все текущее значение, когда поле получает фокус, комбинация ответов @Cory House и @Toastrackenigma представляется наиболее канонической. Используйтеfocus
иfocusout
события, с обработчиками, которые устанавливают / освобождают текущий элемент фокуса, и выбирают все, когда фокус. Пример angular2 / typcript выглядит следующим образом (но было бы тривиально преобразовать его в vanilla js):Шаблон:
Составная часть:
источник