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

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

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

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

JQuery - это не JavaScript, который в некоторых случаях более прост в использовании.

Посмотрите на этот пример:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Источник: CSS Tricks , MDN

Это не просто проблема Chrome / Safari, с Firefox 18.0.1 у меня было довольно похожее поведение. Самое смешное, что этого не происходит на MSIE! Проблема здесь заключается в первом событии mouseup, которое заставляет отменить выбор входного содержимого, поэтому просто игнорируйте первый случай.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

Подход timeOut вызывает странное поведение, и, блокируя каждое событие mouseup, вы не можете удалить выделение, щелкая снова на элементе ввода.

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()}
/>

мое решение заключается в использовании тайм-аута. Кажется, работает нормально

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Это также будет работать на iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Я знаю, что встроенный код - это плохой стиль, но я не хотел помещать это в файл .js. Работает без JQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

Ответы здесь помогли мне до некоторой степени, но у меня была проблема с полями ввода чисел HTML5 при нажатии кнопок вверх / вниз в Chrome.

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

Я решил это, удалив обработчик mouseup, как только он был запущен, как показано ниже:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Надеюсь, это поможет людям в будущем ...

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

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

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

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

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

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

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

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

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

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

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

Решение @ Mari требует импорта 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;
      };

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

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

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

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

onfocus="this.select()"

Например:

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

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

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

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

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Редактировать: По запросу @ DavidG я не могу предоставить подробности, потому что я не уверен, почему это работает, но я считаю, что это как-то связано с событием фокуса, распространяющимся вверх или вниз, или с чем бы то ни было, и с элементом ввода, получающим уведомление это получило фокус. Установка времени ожидания дает элементу момент, чтобы понять, что это сделано.

Если вы объедините события в цепочку, я считаю, что это избавит от необходимости использовать, .oneкак это предлагается в другом месте в этой теме.

Пример:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

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

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

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

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

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

Я немного опаздываю на вечеринку, но это прекрасно работает в IE11, Chrome, Firefox, без проблем с мышью (и без JQuery).

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

Мое решение следующее:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Таким образом, mouseup обычно будет работать, но не сможет отменить выбор после получения фокуса при вводе