введення 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 (), щоб він повністю запускався після фокусування ():

$("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(натисніть) та keyup(вкладка), які збираються запустити.

Примітка . Клавіатура події вкладки фактично запуститься в новому полі введення, а не в попередньому

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

Примітка . Більшість браузерів, звичайно, вибирають увесь текст під час події на вкладці, але, як вказував анімографічний малюнок , ми все ще хочемо обробляти 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

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 perfect.

Ви можете використовувати простий код:

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

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

Я завжди використовую requestAnimationFrame()для переходу на внутрішні механізми після подій, і це прекрасно працює у Firefox. Не перевірений у Chrome.

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