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


555

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

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

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

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

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

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


6
Лучшим подходом является использование <label>для метки, а не для value. Вы можете использовать JS и CSS, чтобы он выглядел одинаково, но не был таким антисемантическим. dorward.me.uk/tmp/label-work/example.html содержит пример использования jQuery.
Квентин

12
Или даже используйте заполнитель, если вы работаете в современном проекте HTML5.
Лео Лам

1
placeholder = "Пожалуйста, введите ID пользователя"
Марсело Бонус

Ответы:


910

Вы можете использовать этот фрагмент JavaScript:

<input onClick="this.select();" value="Sample Text" />

Но, очевидно, он не работает на мобильном Safari. В этих случаях вы можете использовать:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

9
Чтобы сделать это более общим, вы можете использовать this.idв качестве аргумента для обработчика кликов. А еще лучше, вы можете getElementByIdполностью исключить и передать thisв качестве аргумента.
Асад Саидуддин

12
На мобильном Safari это не работает. Попробуйте вместо этого вызвать this.setSelectionRange (0, 9999).
Дин Рэдклифф

43
@DeanRadcliffe Хороший! Я бы использовал this.setSelectionRange(0, this.value.length)вместо этого.
2-е


8
Какие-либо обновления в поддержке браузера? w3schools.com/jsref/met_text_select.asp утверждает, что он поддерживается всеми браузерами
Ayyash

65

Ранее опубликованные решения имеют две особенности:

  1. В Chrome выбор с помощью .select () не выполняется - добавление небольшого тайм-аута решает эту проблему.
  2. Невозможно поместить курсор в нужную точку после фокуса.

Вот полное решение, которое выделяет весь текст в фокусе, но позволяет выбрать конкретную точку курсора после фокуса.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

7
Чтобы обработать случай, когда пользователь щелкает по полю, а затем снова возвращается, добавьте.on('blur', 'input', function(){focusedElement = null;})
Tamlyn

1
тайм-аут 0работ для меня в Chrome и Firefox. не уверен, откуда 50исходит ваше время ожидания .
thejoshwolfe

1
Решение состоит в том, чтобы использовать onClick вместо onFocus. Работает отлично и не требует сложных кодов.
Исмаэль

4
@CoryHouse это не имеет значения, потому что Focus через вкладку изначально выделять текст! Не требуется JavaScript
Исмаэль

1
@CoryHouse даже через 4 года ваши коды работают как шарм. Человек, поклонись. Спасибо за этот маленький грязный хак. Я искал 2-3 дня, пока не нашел этот. : +1:
Рутвий Котари

47

Html (вам нужно поместить атрибут onclick на каждый ввод, для которого он будет работать на странице)

 <input type="text" value="click the input to select" onclick="this.select();"/>

ИЛИ ЛУЧШИЙ ВАРИАНТ

JQuery (это будет работать для каждого ввода текста на странице, не нужно менять свой HTML):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

22
Вероятно, было бы лучше привязать к событию focus, чем щелкать по тем, кто вкладывает элементы формы.
Эндрю Энсли

7
@Andrew Это не обязательно, так как текст всегда выделяется, если вы перемещаетесь по элементам ввода. ;-)
nietonfir

События фокуса сбои, с другой стороны, событие размытия полезно для запуска проверки и автоматического сохранения форм, работает, когда вы просматриваете тоже!
oLinkWebDevelopment

Должно работать нормально, убедитесь, что вы используете обновленную версию jQuery, или используйте $ (document) .live () в старых версиях.
oLinkWebDevelopment

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

37

Я знаю, что это старая версия, но лучше всего использовать новый placeholderатрибут HTML, если это возможно:

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

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


2
Обратите внимание, что заполнитель допускается только с html типа документа.
Dogawaf

12

Приведенные ответы являются частичными, по моему мнению. Ниже я привел два примера того, как сделать это в Angular и с JQuery.

Это решение имеет следующие особенности:

  • Работает для всех браузеров, которые поддерживают JQuery, Safari, Chrome, IE, Firefox и т. Д.
  • Работает для PhoneGap / Cordova: Android и IOs.
  • Выбирает все только один раз после того, как ввод получает фокус до следующего размытия, а затем фокус
  • Можно использовать несколько входов, и он не глючит.
  • Угловая директива имеет большое повторное использование, просто добавьте директиву select-all-on-click
  • JQuery может быть легко изменен

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angular: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

хорошее решение angularjs. Спасибо. хотя я не использую флаг hasSelectedAll. Я предполагаю, что это условие для второго клика, который может означать, что пользователь хочет разместить курсор.
роса

11

Пытаться:

onclick="this.select()"

Это прекрасно работает для меня.


11

Вы всегда можете использовать document.execCommand( поддерживается во всех основных браузерах )

document.execCommand("selectall",null,false);

Выделяет весь текст в текущем элементе.


Это выглядит элегантным решением. Полный код будет выглядеть так:<input type="text" onclick="document.execCommand('selectall',null,false);" />
pipepiper

Да, это мой любимый способ сделать такую ​​задачу, особенно как это работает для contenteditableэлементов, а также. Я думаю, что вы также можете сделать это даже немного более элегантным, то есть <input type="text" onfocus="document.execCommand('selectall')">- уверен, что вы можете удалить nullи, falseесли вы не используете их.
Toastrackenigma

Да. onfocusкажется лучше чем onclick. и да, можно покончить с nullи false. Спасибо!
pipepiper

Я согласен, что это лучшее кросс-браузерное решение с оговоркой, что для обеспечения совместимости кросс-браузерного тайм-аута следует использовать время ожидания, указанное в решении @Corey House.
Эрик Лиз

1
при использовании onfocusвся страница выбирается при нажатии на ввод в Chrome. onclickработает отлично.
роботик

8

автофокус ввода, с событием onfocus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Это позволяет открыть форму с выбранным элементом. Он работает с помощью автофокуса для нажатия на вход, который затем отправляет себе событие onfocus, которое, в свою очередь, выделяет текст.


8

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


6

В самом деле, используйте, onclick="this.select();"но помните, чтобы не комбинировать его с ним disabled="disabled"- тогда он не будет работать, и вам все равно придется выбрать его вручную или щелкнуть несколько раз. Если вы хотите заблокировать значение содержимого для выбора, объедините его с атрибутом readonly.


4

Вот многоразовая версия ответа Шобана:

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

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

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


4

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

<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

Точное решение того, что вы спросили:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Но я полагаю, вы пытаетесь показать «Пожалуйста, введите идентификатор пользователя» в качестве заполнителя или подсказки при вводе. Таким образом, вы можете использовать следующее как более эффективное решение:

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

3

Вот пример в 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потому что элемент уже получил фокус к моменту запуска события click (и, таким образом,activeElement проверка не пройдёт).

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

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

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


такое React нового jQuery?
vpzomtrrfrt

@vpzomtrrfrt Конечно, это: DJ / K. Я написал это в React, и я не собирался отменять React только для некоторых SO пунктов. Возьми или оставь это :-)
mpen

Как это пример в React? Это больше пример в нативном JavaScript.
Цезарь

2

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

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

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

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



2

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

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

function textSelector(ele){
    $(ele).select();
}

4
«javascript:» используется только в href, и его следует избегать.
user1133275 11.12.15

1

Ну, это нормальная деятельность для TextBox.

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

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

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


1
Также 2 клика для выбора слова и 3 для выбора строки.
Артур

1

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


0

Если вы используете 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 - поэтому первая и последняя строка могут быть пропущены, если используется что-то еще.


0

Если кто-то хочет сделать это при загрузке страницы с помощью 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


0

Если вы просто пытаетесь получить замещающий текст, который будет заменен, когда пользователь выбирает элемент, то, очевидно, в 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); });
};
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.