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

Question

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

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

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

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

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

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

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

694

javascript html textinput

Источник

user387298 01 ноя '10 в 08:27

30 ответов

Решение

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

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

91

Источник

user26180 21 окт '13 в 15:21

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>

57

Источник

user1159603 10 окт '12 в 05:16

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

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

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

43

Источник

user1733546 17 май '13 в 06:25

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

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

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

20

Источник

user2691058 18 янв '16 в 07:29

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

18

Источник

user7580839 24 июл '18 в 10:33

Пытаться:

onclick="this.select()"

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

13

Источник

user1048047 29 янв '13 в 00:17

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

13

Источник

user3917549 10 сен '15 в 12:13

Я искал решение только для CSS и обнаружил, что это работает для браузеров iOS (протестировано сафари и хром).

У него нет такого же поведения на настольном Chrome, но боль при выборе там не так велика, потому что у вас как у пользователя гораздо больше возможностей (двойной щелчок, ctrl-a и т. Д.):

      .select-all-on-touch {
    -webkit-user-select: all;
    user-select: all;
}

12

Источник

user1831118 15 фев '21 в 00:25

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

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

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

12

Источник

user599484 23 фев '16 в 06:26

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

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

6

Источник

user9481375 11 апр '18 в 13:09

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

6

Источник

user2455390 05 июн '13 в 11:22

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

          onFocus={e => {
      e.target.select();
    }

Если вам нужно selectAll каждый щелчок, вы можете использовать это:

          onClick={e => {
      e.target.focus();
      e.target.select();
    }

5

Источник

Artem Voronenkov 15 дек '21 в 09:58

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

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

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

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

4

Источник

user342852 01 ноя '10 в 08:33

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

4

Источник

user65387 12 июл '18 в 21:32

4

Источник

Kriss Yu 31 мар '23 в 07:03

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

<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

Источник

user3994271 26 дек '16 в 08:23

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

2

Источник

user5052035 26 июн '15 в 07:31

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

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

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

2

Источник

user3089858 12 окт '15 в 09:57

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

2

Источник

user326532 02 дек '13 в 04:47

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

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

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

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

2

Источник

user1869134 07 окт '13 в 08:44

использовать этот. это просто.

это сработало! 👍 просто попробуйте!

1

Источник

user14774411 03 окт '21 в 13:26

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

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

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

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

1

Источник

user321946 01 ноя '10 в 08:33

я используюfocus-attribute в моем приложении vue

      <input @focus="$event.target.select()" />

1

Источник

user11869100 09 дек '22 в 11:53

Если вы ищете чистый ванильный метод javascript, вы также можете использовать:

       document.createRange().selectNodeContents( element );

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

Чтобы активировать выделение в фокусе, вам просто нужно добавить прослушиватель событий следующим образом:

       document.querySelector( element ).addEventListener( 'focusin', function () {

    document.createRange().selectNodeContents( this );

} );

Если вы хотите поместить его в свой HTML-код, вы можете сделать это:

       <input type="text" name="myElement" onFocus="document.createRange().selectNodeContents(this)'" value="Some text to select" />

Это просто еще один вариант. Кажется, есть несколько способов сделать это. (document.execCommand("selectall") также упоминается здесь)

         document.querySelector('#myElement1').addEventListener('focusin', function() {

  document.createRange().selectNodeContents(this);

});

         <p>Cicking inside field will not trigger the selection, but tabbing into the fields will.</p>
<label for="">JS File Example<label><br>
<input id="myElement1" value="This is some text" /><br>
<br>
<label for="">Inline example</label><br>
<input id="myElement2" value="This also is some text" onfocus="document.createRange().selectNodeContents( this );" />

0

Источник

user379540 01 окт '20 в 04:31

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

Источник

user708385 15 июл '15 в 18:58

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

0

Источник

user4342563 27 янв '17 в 07:36

Живая демонстрация

      <input id="my_input" style="width: 400px; height: 30px;" value="some text to select">
<br>
<button id="select-bn" style="width: 100px; height: 30px; margin-top: 20px;cursor:pointer;">Select all</button>
<br><br>
OR 
<br><br>
Click to copy
<br><br>
<input id="my_input_copy" style="width: 400px; height: 30px;" value="some text to select and copy">
<br>
<button id="select-bn-copy" style="width: 170px; height: 30px; margin-top: 20px;cursor:pointer;">Click copy text</button>


<script type="text/javascript">
$(document).on('click', '#select-bn', function() {
  $("#my_input").select();
});


//click to select and copy to clipboard

var text_copy_bn = document.getElementById("select-bn-copy");
text_copy_bn.addEventListener('click', function(event) {
  var copy_text = document.getElementById("my_input_copy");
  copy_text.focus();
  copy_text.select();
  try {
    var works = document.execCommand('copy');
    var msg = works ? 'Text copied!' : 'Could not copy!';
    alert(msg);
  } catch (err) {
    alert('Sorry, could not copy');
  }
});
</script>

0

Источник

user13127428 13 май '21 в 04:22

Если вы используете 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

Источник

user330802 26 июн '15 в 07:45

С использованием placeholder="Please enter the user ID" вместо value="Please enter the user ID" - лучший подход для этого сценария, но в некоторых случаях функция может быть полезна.

<input> элементы уже могут слушать focusмероприятие. Мы можем просто добавить к нему прослушиватель событий вместо document, и больше не нужно слушать click.

Обычный JavaScript:

      document.getElementById("userid").addEventListener("focus", function() {
    this.select();
});

С JQuery:

      $("#userid").on("focus", function() {
    this.select();
});

Вы можете использовать this.setSelectionRange(0, this.value.length) вместо this.select() зависит от вашей цели, но это не будет работать с некоторыми типами ввода, такими как number.

0

Источник

04 май '21 в 05:58

Другие вопросы по тегам javascript html textinput

user32090 01 ноя '10 в 08:32 2010-11-01 08:32 · Accepted Answer · 2010-11-01 08:32

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

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

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

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

1143

Источник

user32090 01 ноя '10 в 08:32