đầu vào jquery chọn tất cả vào trọng tâm

Tôi đang sử dụng mã này để thử và chọn tất cả văn bản trong trường khi người dùng tập trung vào trường. Điều gì xảy ra là, nó chọn tất cả trong một giây, sau đó nó không được chọn và con trỏ gõ được để lại nơi tôi nhấp ...

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

Tôi muốn tất cả vẫn được chọn.

Hãy thử sử dụng clickthay vì focus. Nó dường như hoạt động cho cả chuột và các sự kiện chính (ít nhất là trên Chrome / Mac):

jQuery <phiên bản 1.7:

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

Phiên bản jQuery 1.7+:

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

Đây là một bản demo

Tôi nghĩ rằng những gì xảy ra là thế này:

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

Một cách giải quyết có thể đang gọi select () không đồng bộ, để nó chạy hoàn toàn sau khi lấy nét ():

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

Tôi nghĩ rằng đây là giải pháp tốt hơn. Không giống như chỉ chọn trong sự kiện onclick, nó không ngăn việc chọn / chỉnh sửa văn bản bằng chuột. Nó hoạt động với các công cụ kết xuất chính bao gồm IE8.

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

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

Có một số câu trả lời hợp lý ở đây và @ user2072367 là sở thích của tôi, nhưng nó có một kết quả không mong muốn khi bạn tập trung qua tab thay vì qua nhấp chuột. (kết quả không mong muốn: để chọn văn bản bình thường sau khi lấy nét qua tab, bạn phải nhấp thêm một lần nữa)

Fiddle này sửa lỗi nhỏ đó và lưu trữ $ (cái này) trong một biến để tránh lựa chọn DOM dư thừa. Kiểm tra nó ra! (

Đã thử nghiệm trong 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();
});

Sau khi xem xét cẩn thận, tôi đề xuất đây là một giải pháp sạch hơn trong chủ đề này:

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

Bản trình diễn trong jsFiddle

Vấn đề:

Dưới đây là một chút giải thích:

Trước tiên, hãy xem thứ tự các sự kiện khi bạn di chuột hoặc tab vào một trường.
Chúng tôi có thể đăng nhập tất cả các sự kiện có liên quan như thế này:

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

Lưu ý : Tôi đã thay đổi giải pháp này để sử dụng clickthay mouseupvì nó xảy ra sau đó trong đường ống sự kiện và dường như gây ra một số vấn đề trong firefox theo nhận xét của @ Jocie

Một số trình duyệt cố gắng định vị con trỏ trong mouseuphoặc clicksự kiện. Điều này có ý nghĩa vì bạn có thể muốn bắt đầu dấu mũ ở một vị trí và kéo qua để tô sáng một số văn bản. Nó không thể chỉ định vị trí dấu mũ cho đến khi bạn thực sự nhấc chuột. Vì vậy, các chức năng xử lý focusđược định mệnh phản hồi quá sớm, khiến trình duyệt ghi đè lên vị trí của bạn.

Nhưng điều khó khăn là chúng tôi thực sự muốn xử lý sự kiện tập trung. Nó cho chúng tôi biết lần đầu tiên có người vào trường. Sau thời điểm đó, chúng tôi không muốn tiếp tục ghi đè hành vi lựa chọn của người dùng.

Giải pháp:

Thay vào đó, trong focustrình xử lý sự kiện, chúng ta có thể nhanh chóng đính kèm người nghe cho các sự kiện click(nhấp vào) và keyup(tab trong) sắp diễn ra.

Lưu ý : Keyup của một sự kiện tab sẽ thực sự kích hoạt trong trường đầu vào mới, không phải trường hợp trước đó

Chúng tôi chỉ muốn bắn sự kiện một lần. Chúng tôi có thể sử dụng .one("click keyup), nhưng điều này sẽ gọi trình xử lý sự kiện một lần cho mỗi loại sự kiện . Thay vào đó, ngay khi nhấn chuột hoặc gõ phím, chúng tôi sẽ gọi chức năng của chúng tôi. Điều đầu tiên chúng ta sẽ làm là loại bỏ các trình xử lý cho cả hai. Bằng cách đó, sẽ không có vấn đề gì cho dù chúng tôi đã gắn thẻ hoặc kết nối. Hàm sẽ thực thi chính xác một lần.

Lưu ý : Hầu hết các trình duyệt tự nhiên chọn tất cả văn bản trong một sự kiện tab, nhưng như hoạt hình đã chỉ ra , chúng tôi vẫn muốn xử lý keyupsự kiện, nếu không mouseupsự kiện sẽ vẫn còn tồn tại bất cứ lúc nào chúng tôi đã đăng nhập. Chúng tôi lắng nghe cả hai để chúng tôi có thể bật tắt người nghe ngay khi chúng tôi xử lý lựa chọn.

Bây giờ, chúng tôi có thể gọi select()sau khi trình duyệt đã chọn, vì vậy chúng tôi chắc chắn sẽ ghi đè hành vi mặc định.

Cuối cùng, để bảo vệ thêm, chúng ta có thể thêm các không gian tên sự kiện vào các hàm mouseupvà các keyuphàm để .off()phương thức không loại bỏ bất kỳ trình nghe nào khác có thể đang phát.

Đã thử nghiệm trong IE 10+, FF 28+ và Chrome 35+

Ngoài ra, nếu bạn muốn mở rộng jQuery với một hàm được gọi oncesẽ chạy chính xác một lần cho bất kỳ số lượng sự kiện nào :

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

Sau đó, bạn có thể đơn giản hóa mã hơn nữa như thế này:

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

Demo trong fiddle

Điều này sẽ thực hiện công việc và tránh vấn đề bạn không còn có thể chọn một phần của văn bản bằng chuột.

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

Phiên bản này hoạt động trên ios và cũng sửa lỗi kéo để chọn tiêu chuẩn trên chrome 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/

Vấn đề với hầu hết các giải pháp này là chúng không hoạt động chính xác khi thay đổi vị trí con trỏ trong trường đầu vào.

Sự onmouseupkiện thay đổi vị trí con trỏ trong trường, được kích hoạt sau onfocus(ít nhất là trong Chrome và FF). Nếu bạn loại bỏ vô điều kiện mouseupthì người dùng không thể thay đổi vị trí con trỏ bằng chuột.

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"));

Mã sẽ có điều kiện ngăn chặn mouseuphành vi mặc định nếu trường hiện không có tiêu điểm. Nó hoạt động cho những trường hợp này:

• nhấp khi trường không tập trung
• nhấp khi trường có trọng tâm
• đi vào lĩnh vực

Tôi đã thử nghiệm điều này trong Chrome 31, FF 26 và IE 11.

Tìm thấy một giải pháp tuyệt vời khi đọc chủ đề này

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

Tôi đến từ cuối năm 2016 và mã này chỉ hoạt động trong các phiên bản gần đây của jquery (jquery-2.1.3.js trong trường hợp này).

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

i sử dụng FF 16.0.2 và jquery 1.8.3, tất cả các mã trong câu trả lời không hoạt động.
Tôi sử dụng mã như thế này và làm việc.

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

Sử dụng ClearTimeout để bảo mật hơn nếu bạn chuyển nhanh giữa hai đầu vào .. ClearTimeout xóa thời gian chờ cũ ...

Hoạt động tuyệt vời với JavaScript gốc select().

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

hoặc nói chung:

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

Hoặc bạn chỉ có thể sử dụng <input onclick="select()">Works hoàn hảo.

Bạn có thể sử dụng mã đơn giản:

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

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

Tôi luôn sử dụng requestAnimationFrame()để vượt qua các cơ chế hậu sự kiện nội bộ và điều này hoạt động hoàn hảo trong Firefox. Chưa được thử nghiệm trong Chrome.

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