it-swarm.com.ru

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

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

282
Jon Erickson
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
343
John Sheehan

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

198
Zach
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
40
Yogesh Agrawal
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
40
Tomas Kirda

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

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

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

19
Cizar

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

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

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

Из CSS Trics .

19
aaa

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

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

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

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

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

5
Kai

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

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

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

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

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

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

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

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

3
H2Os

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

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

2
Jonathan Gilbert

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
Aniruddha Shevle

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

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

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

2
Adithya Kumaranchath

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

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

2
Travis

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

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

onfocus="this.select()"

Например:

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

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

1
ADTC

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

 $("#textBox").focus().select();
1
Vijay Vepakomma
onclick="this.focus();this.select()"
1
Rahul
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

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

0
Michael Tranchida

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

Пример:

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

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

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

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

0
Exel Gamboa

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

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

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