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

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

24 ответов


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

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

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

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

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

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

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


у безумцев... Jquery не JavaScript whitch более прост в использовании в некоторых случаях.

рассмотрим пример:

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

С Css trics


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

$('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


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

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

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

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

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


Я знаю, что встроенный код-плохой стиль, но я не хотел помещать это в a .файл 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>

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

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

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

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

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


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

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


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

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

Edit: по запросу @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, не испортив mouseup (и без 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 будет работать обычно, но не будет делать unselect после получения фокуса по входу