Выберите все содержимое текстового поля, когда оно получает фокус (Vanilla JS или jQuery)

Question

Что такое решение Vanilla JS или jQuery, которое будет выделять все содержимое текстового поля, когда текстовое поле получает фокус?

Answer 1

Я знаю, что здесь уже много ответов, но этого пока нет; решение, которое также работает с содержимым, сгенерированным ajax:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

Answer 2

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Использование JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Использование JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Использование React Js:

В соответствующем компоненте внутри функции рендеринга -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

Answer 3

Это будет работать, попробуйте это -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Работает в Safari / IE 9 и Chrome, но у меня не было возможности протестировать в Firefox.

Answer 4

Как и @Travis и @Mari, я хотел сделать автоматический выбор, когда пользователь нажал на кнопку, что означает предотвращение поведения по умолчанию для события mouseup, но не помешает пользователю нажимать вокруг. Предлагаемое мной решение, которое работает в IE11, Chrome 45, Opera 32 и Firefox 29 (это браузеры, которые я установил в настоящее время), основано на последовательности событий, связанных с щелчком мыши.

Когда вы нажимаете на текстовый ввод, который не имеет фокуса, вы получаете следующие события (среди прочих):

• mousedown: в ответ на ваш щелчок. Обработка по умолчанию поднимает focus при необходимости и устанавливает начало выбора.
• focus: как часть обработки по умолчанию mousedown.
• mouseup: завершение вашего клика, обработка которого по умолчанию установит окончание выбора.

Когда вы нажимаете на текстовый ввод, который уже имеет фокус, событие focus пропускается. Как @Travis и @Mari оба сообразили, что обработку по умолчанию mouseup необходимо предотвратить, только если происходит событие focus. Однако, поскольку события "focus не произошло" нет, нам нужно сделать вывод об этом, что мы можем сделать в обработчике mousedown.

@ Решение Мари требует импорта jQuery, чего я хочу избежать. Решение @ Travis делает это путем проверки document.activeElement. Я не знаю, почему именно его решение не работает во всех браузерах, но есть другой способ отследить, имеет ли фокус ввод текста: просто следуйте его событиям focus и blur.

Вот код, который работает для меня:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Надеюсь, это кому-нибудь поможет. : -)

Answer 5

Мне удалось немного улучшить ответ Зака, добавив несколько вызовов функций. Проблема с этим ответом заключается в том, что он полностью отключает onMouseUp, что не позволяет вам щелкать по текстовому полю, когда оно имеет фокус.

Вот мой код:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Это небольшое улучшение по сравнению с ответом Зака. Он отлично работает в IE, совсем не работает в Chrome и работает с переменным успехом в FireFox (буквально через раз). Если у кого-то есть идея, как заставить его работать надежно в FF или Chrome, пожалуйста, поделитесь.

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

Answer 6

Что такое решение JavaScript или jQuery, которое выберет все содержимое текстового поля, когда текстовое поле получает focus ?

Вам нужно только добавить следующий атрибут:

onfocus="this.select()"

Например:

<input type="text" value="sometext" onfocus="this.select()">

(Честно говоря, я понятия не имею, зачем вам что-то еще нужно.)

Answer 7

Это сработало для меня (публикуя, потому что это не в ответах, а в комментариях)

 $("#textBox").focus().select();

Answer 8

onclick="this.focus();this.select()"

Answer 9

Я сею это где-то, отлично работает!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

Answer 10

Примечание. Если вы программируете в ASP.NET, вы можете запустить скрипт, используя ScriptManager.RegisterStartupScript на C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Или просто введите скрипт на странице HTML, предложенной в других ответах.