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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

Приведенные ответы являются частичными, по моему мнению. Ниже я привел два примера того, как сделать это в 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;
      });
    }
  };
}]);

Пытаться:

onclick="this.select()"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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. Заполнитель делает это так, что это не значение, а, как следует из названия, заполнитель. Это то, что используется в нескольких онлайн-формах с надписью «Имя пользователя здесь» или «Электронная почта», и когда вы нажимаете на нее, «Электронная почта» исчезает, и вы можете сразу же начать печатать.

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

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

Вот пример в 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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