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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

Answer 3

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>

Answer 4

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

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

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

Answer 5

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

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

• Работает для всех браузеров, поддерживающих JQuery, Safari, Chrome, IE, Firefox и т. Д.
• Работает для Phonegap / Cordova: Android и IO.
• Выбирает все только один раз после того, как ввод получает фокус до следующего размытия, а затем фокус
• Можно использовать несколько входов, и он не глючит.
• Угловая директива имеет большое повторное использование, просто добавьте директиву 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);
    }
  }
});

Угловой: 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;
      });
    }
  };
}]);

Answer 6

Попробуйте:

onclick="this.select()"

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

Answer 7

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

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

Выбирает весь текст в текущем фокусе элемента.

Answer 8

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

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

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

Answer 9

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

Answer 10

Точное решение вашего вопроса:

<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" />