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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

пункт 1 - установить фокус

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

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

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

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

пока результаты вроде поведение я ожидал.

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

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

использовать "заполнитель" вместо "значение" в поле ввода.

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

и код javascript без bind

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

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

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

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

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

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

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

Если кто-то хочет сделать это на странице load w/ jQuery (sweet for search fields) вот мое решение

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

если вы просто пытаетесь иметь текст-заполнитель, который заменяется, когда пользователь выбирает элемент, то, очевидно, лучше всего использовать

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

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

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