Виберіть увесь вміст текстового поля, коли він отримає фокус (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! Проблема тут - перша подія миші, яка змушує скасувати вибір вхідного вмісту, тому просто ігноруйте перше виникнення.

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

Підхід timeOut викликає дивну поведінку, і блокуючи кожну подію миші, ви не зможете видалити виділення знову, натиснувши на вхідний елемент.

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.

Якщо натиснути одну з кнопок і натиснути курсор миші на кнопку, то число не змінюватиметься так, як ніби ви тримаєте кнопку миші, оскільки мишу викидаєте.

Я вирішив це, видаливши обробник миші, як тільки він був запущений, як показано нижче:

    $("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, чого я хочу уникати. @ Рішення Тревіса робить це шляхом перевірки 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;
     });
});

Таким чином, миша працюватиме зазвичай, але не зробить скасування вибору після отримання фокусу шляхом введення