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


311

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



3
@gdoron по какой-то причине эта ссылка перенаправляет на сам вопрос.
Destrictor


Проблема большинства этих решений заключается в том, что они не работают правильно при изменении положения курсора в поле ввода. Посмотрите на мой ответ здесь: stackoverflow.com/a/20826207/641452
Колин Брейм

Ответы:


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

23
Также просто для дополнительной информации: «input [type = text]» теперь может быть «input: text». С уважением
Рикардо Вега

8
Похоже, это не работает для меня в Chrome, а на сайте jQuery написано, что это зависит от браузера. Кто-нибудь еще может проверить?
Кенни Уайлэнд

71
Похоже, что браузеры WebKit мешают этому из-за события mouseup. Я добавил это, и это сработало: $ ('input: text'). Mouseup (function (e) {return false;});
Кенни Уайлэнд

5
Кенни прав, но, к сожалению, «mouseup» также влияет на элементы управления Chrome. Похоже, что срабатывает «щелчок», а не «фокус»
Ричард Кеннард,

24
Я использую так: $ ("input: text"). Select (). Focus ();
Phuong

227

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


43
+ onmouseup = "вернуть false", чтобы прекратить отмену выбора при клике
Энтони Джонстон

2
+1 для какого-то stopEvent для mouseup, или это не работает надежно. Недостатком этого является то, что когда курсор находится в поле, щелчок где-нибудь в выделенном тексте для позиционирования курсора не работает; клики эффективно отключены. Тем не менее, для ситуаций, когда желательно выделить весь текст в фокусе, это, вероятно, меньшее из двух зол.
загадка

Мне удалось немного обойти проблему, возникающую из-за enigment, установив глобальную переменную doMouseUp в false, во время события onMouseDown, если это! = Document.activeElement. Затем, во время onMouseUp, сбросьте doMouseUp в true и верните значение doMouseUp перед его сбросом. Это становится запутанным и нуждается в коде - я отправлю ответ, объясняющий это лучше.
Трэвис

1
НЕ добавляйте, onmouseup="return false;"если вы хотите, чтобы пользователь мог свободно выбирать и редактировать текст после фокусировки внутри текстового поля. С помощью этого кода текст будет заблокирован в ситуации «выбрать все», и пользователь не сможет редактировать его, если пользователь не введет новый текст или не использует клавиши со стрелками для перемещения. Честно говоря, это выглядит как очень странное поведение и не имеет смысла, если текстовое поле не предназначено для постоянного редактирования (и поэтому отключено).
ADTC

1
Технически, вам не нужно, onmouseup="return false;"если вы просто хотите, чтобы выбор происходил, когда пользователь впервые нажимает или вкладывает. И +1 за ванильный JavaScript!
clabe45


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

1
Это хорошо. Спасибо! Комментарий путем загадки к ответу Зака ​​дает одну обратную сторону предотвращения mouseupсобытия по умолчанию : «когда курсор находится в поле, щелчок где-нибудь в пределах выделенного текста для позиционирования курсора там не работает; щелчки эффективно отключены. Тем не менее, для ситуации, когда желательно выделить весь текст в фокусе, это, вероятно, меньшее из двух зол ".
JohnK

25

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

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

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

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


7
Может быть, это нормально, если вы не возражаете смешивать разметку и код; большинство людей стараются сделать свой сценарий «ненавязчивым» в наши дни. Ох ... и JQuery это Javascript.
Эндрю Барбер

2
Спасибо за предложение onclick, прекрасно работает. Не все используют jQuery, так что рад видеть другой вариант.
Лукус

это предполагает, что пользователи используют только мышь
pcnate

можно использовать onfocus = "this.focus (); this.select ()" для клавиатуры
Мухаммед Надим

21

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

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

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


1
+1 за использование одного, чтобы предотвратить одиночную мышинку. Мне очень не понравилось, что я не могу выделить текст мышью после первого щелчка.
Pluc

13

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

2
Это работает для меня в React:onFocus={(e) => e.target.select()}
Paito

11

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

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

Это решение, которое я использую и предпочитаю. Я использую значение тайм-аута 0, так как это приведет к его добавлению в конец текущей очереди событий, что означает, что он будет работать после события mouseup.
DavidM


4

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

3

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

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

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

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

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


Nopes. вы даете решение самостоятельно сгенерированной проблемы. Если вы посмотрите на ответ правильно, они будут привязаны только mouseupк полям ввода текста, а не к numbers. Поэтому эта проблема не должна возникать
Ом Шанкар

Проблема с привязкой mouseup заключается в том, что он мешает перемещению курсора в поле. Это лучшее решение, но если вы введете вкладку в поле, то следующий mousedown будет потерян (и пользователь не сможет перемещать курсор с помощью мыши). Это лучше, чем потерять все муссады!
Колин Брим

3

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

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

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


3

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

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

2

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

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


В вашем коде есть ошибка - второй метод должен называться «TextBoxMouseUp». Посмотрите на мой ответ, который использует аналогичный подход.
Колин Брим

1
Следует отметить , что onMouseUp=""и onMouseDown=""не правильный стандарт w3. Они должны быть onmouseup=""и onmousedown="". Как и в случае других html-атрибутов, они должны быть написаны строчными буквами, а не верблюжьими.
DrewT

2

Как и @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;
      };

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


+1 Спасибо, но как это можно переписать, чтобы вы не жестко закодировали элемент управления «txtCustomer» в сценарий? Есть ли способ передать «этот» объект?
Fandango68

Одним из способов было бы создание вспомогательной функции для применения поведения к любому элементу, переданному в качестве параметра. Внутри этой функции ссылка на элемент будет жестко задана для параметра. Затем вы можете вызывать его для любого количества элементов ввода, идентифицируемых любым доступным вам способом. :-)
Джонатан Гилберт

Извините, я нуб. Не могли бы вы обновить свой ответ с примером? Спасибо
Fandango68

1
Просто оберните код, который я написал, в объявление функции, которое принимает параметр с именем "txtCustomer". Я рекомендую переименовать txtCustomer во что-то другое, но если вы не уверены в этом, он будет технически работать с переменной с именем «txtCustomer». То есть: функция MakeTextBoxAutoSelect (txtCustomer) { то, что я написал выше }
Джонатан Гилберт


1

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

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

onfocus="this.select()"

Например:

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

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



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

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


Пожалуйста, объясните свой ответ, а не просто вставьте в некоторый код.
DavidG

0

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

Пример:

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

0

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

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

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


Вопрос нигде не имеет ASP.NET. : |
Мохаммед Тауфик

Правда, я разместил это на всякий случай, если программист использует ASP.NET. Это может быть полезно для кого-то, ищущего ответ, используя структуру (поскольку это помогло мне). Я просто делюсь, и, надеюсь, кто-то найдет это полезным.
Exel Gamboa

На всякий случай, если программист использует ASP.NET, он добавит тег «asp.net» к вопросу. : |
Мохамед Тауфик

0

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

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

0

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

да, но если вы нажмете focusна поле, вы найдете несколько слушателей событий mouseup, прикрепляющихся ...
Себастьян Шолле,

-1

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

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 обычно будет работать, но не сможет отменить выбор после получения фокуса при вводе

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.