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

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

Ответы

Ответ 1

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

У сумасшедших парней... Jquery - это не JavaScript, но в некоторых случаях проще использовать.

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

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

из Css trics

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

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

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

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

Подобно @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;
      };

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

Ответ 14

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

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

Ответ 15

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

Ответ 16

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

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

onfocus="this.select()"

Например:

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

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

Ответ 17

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

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

Ответ 18

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

Пример:

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

Ответ 19

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

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

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

Ответ 20

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 => this.selectAllValue.bind(this, e.target)}
/>

В том же компоненте с вашей функцией -

selectAllValue(quantity) {
  quantity.select();
}

Ответ 21

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

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

Ответ 22

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

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

Ответ 23

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

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

Так что мышь будет работать обычно, но не будет отменять выбор после получения фокуса с помощью ввода