вход jquery выберите все в фокусе

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

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

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

15 ответов


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

jQuery

$("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); });

focus events

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

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

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

Решение:

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

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

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

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

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

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


испытано в IE 10+, FF 28+, & Chrome 35+


альтернативно, если вы хотите расширить jQuery с помощью


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

$("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");
    }
});

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

на 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.


эта версия работает на 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/


найдено удивительное решение чтения этой теме

$(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();

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


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

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


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

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

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