JQuery ввода выбрать все в фокусе

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

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

Я хочу, чтобы все оставалось выбранным.

Попробуйте использовать clickвместо focus. Кажется, он работает как для мыши, так и для ключевых событий (по крайней мере, в Chrome / Mac):

jQuery <версия 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

JQuery версия 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Вот демо

Я думаю, что происходит так:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Обходной путь может вызывать select () асинхронно, чтобы он полностью выполнялся после focus ():

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

Я думаю, что это лучшее решение. В отличие от простого выбора в событии onclick, это не мешает выделению / редактированию текста с помощью мыши. Он работает с основными движками рендеринга, включая IE8.

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

http://jsfiddle.net/25Mab/9/

Здесь есть несколько достойных ответов, и @ user2072367 - мой любимый, но он дает неожиданный результат, когда вы фокусируетесь не на клике, а на вкладке. (неожиданный результат: чтобы выделить текст после фокуса через вкладку, необходимо щелкнуть еще один раз)

Эта скрипка исправляет эту небольшую ошибку и дополнительно хранит $ (this) в переменной, чтобы избежать избыточного выбора DOM. Проверьте это! (:

Протестировано в IE> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

После тщательного анализа я предлагаю это как более чистое решение в этой теме:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Демо в jsFiddle

Эта проблема:

Вот немного объяснения:

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

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

Примечание : я изменил это решение, чтобы использовать его, clickа не так, mouseupкак это происходит позже в конвейере событий, и, похоже, вызывает некоторые проблемы в Firefox согласно комментарию @ Jocie.

Некоторые браузеры пытаются позиционировать курсор во время событий mouseupили click. Это имеет смысл, поскольку вы можете запустить каретку в одной позиции и перетащить ее, чтобы выделить текст. Он не может обозначать положение каретки, пока вы на самом деле не подняли мышь. Таким образом, функции, которые обрабатывают focus, обречены реагировать слишком рано, оставляя браузер переопределять ваше позиционирование.

Но проблема в том, что мы действительно хотим справиться с фокусным событием. Это позволяет нам узнать, когда кто-то вышел на поле. После этого мы не хотим продолжать переопределять поведение выбора пользователя.

Решение:

Вместо этого, в focusобработчике событий мы можем быстро подключить прослушиватели для событий click(click in) и keyup(tab in), которые будут запущены.

Примечание : Keyup события табуляции будет фактически запускаться в новом поле ввода, а не в предыдущем

Мы хотим запустить событие только один раз. Мы могли бы использовать .one("click keyup), но это вызвало бы обработчик события один раз для каждого типа события . Вместо этого, как только будет нажата мышь или клавиша, мы вызовем нашу функцию. Первое, что мы сделаем, это удалим обработчики для обоих. Таким образом, не имеет значения, будем ли мы вкладывать или вкладывать. Функция должна выполняться ровно один раз.

Примечание . Большинство браузеров естественным образом выделяют весь текст во время события табуляции, но, как указывает animatedgif , мы по-прежнему хотим обрабатывать keyupсобытие, в противном mouseupслучае событие все равно будет задерживаться в любое время, когда мы добавили вкладку. Мы слушаем оба, чтобы мы могли включить от слушателей, как только мы обработали выбор.

Теперь мы можем позвонить select()после того, как браузер сделал свой выбор, поэтому мы обязательно переопределим поведение по умолчанию.

Наконец, для дополнительной защиты, мы можем добавить пространство имен событий к mouseupи keyupфункциям , поэтому .off()метод не удаляет другие слушателей , которые могут быть в игре.

Протестировано в IE 10+, FF 28+ и Chrome 35+

В качестве альтернативы, если вы хотите расширить jQuery с помощью функции, onceкоторая будет запускаться ровно один раз для любого количества событий :

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Тогда вы можете упростить код так:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Демо в скрипке

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

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

Эта версия работает на IOS, а также исправляет стандартное перетаскивание для выбора на Windows Chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

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

onmouseupСобытие изменяет положение курсора в пределах поля, которое обжигало после того, как onfocus(по крайней мере , в пределах Chrome и FF). Если вы безоговорочно откажетесь, mouseupпользователь не сможет изменить положение курсора с помощью мыши.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

Код будет условно предотвращать mouseupповедение по умолчанию, если поле в данный момент не имеет фокуса. Это работает для этих случаев:

• щелчок, когда поле не сфокусировано
• щелчок, когда поле имеет фокус
• вкладка в поле

Я проверил это в Chrome 31, FF 26 и IE 11.

Нашел отличное решение, читая эту тему

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

Я работаю в конце 2016 года, и этот код работает только в последних версиях jquery (в данном случае jquery-2.1.3.js).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

Я использовал FF 16.0.2 и jquery 1.8.3, весь код в ответ не работал.
Я использую такой код и работаю.

$("input[type=text]").focus().select();

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

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

Прекрасно работает с нативным JavaScript select().

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

или вообще:

$("input[type=text]")[0].select()

Или вы можете просто использовать <input onclick="select()">Works отлично.

Вы можете использовать простой код:

$('#idname').select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Я всегда использую, requestAnimationFrame()чтобы перепрыгнуть через внутренние механизмы после события, и это отлично работает в Firefox. Не тестировался в Chrome.

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});