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

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

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

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

Можно ли всего текста выделить всего один клик?

Edit:

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

        $(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.
            });
        });

Ответ 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>

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

Try:

onclick="this.select()"

Это отлично работает для меня.

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

Здесь можно использовать многократную версию ответа Shoban:

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

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

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

Ответ 11

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

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

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

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

Ответ 12

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

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

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

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

Ответ 13

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

Ответ 14

Используйте "placeholder" вместо "value" в вашем поле ввода.

Ответ 15

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

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

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

Ответ 16

Точное решение по вашему желанию:

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

Ответ 17

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

Ответ 18

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

На основе this post. Благодаря CSS-Tricks.com

Ответ 19

Если вы просто пытаетесь получить текст заполнителя, который заменяется, когда пользователь выбирает этот элемент, то, очевидно, лучше всего использовать атрибут placeholder в настоящее время. Однако, если вы хотите выбрать все текущее значение, когда поле получает фокус, то комбинация ответов @Cory House и @Toastrackenigma кажется наиболее канонической. Используйте события focus и focusout, с обработчиками, которые устанавливают/освобождают текущий элемент фокусировки и выбирают все, когда сфокусированы. Пример angular2/typescript выглядит следующим образом (но было бы тривиально преобразовать в 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); });
};