Câu hỏi Chọn văn bản theo chương trình trong trường nhập trên thiết bị iOS (Safari di động)


Làm cách nào để bạn chọn văn bản của trường nhập trên thiết bị iOS theo cách lập trình, ví dụ: iPhone, iPad chạy Safari di động?

Thông thường nó là đủ để gọi .select() chức năng trên <input ... /> nhưng điều này không hoạt động trên các thiết bị đó. Con trỏ chỉ đơn giản là trái ở cuối mục nhập hiện tại mà không có lựa chọn nào được thực hiện.


76
2017-07-17 15:24


gốc


và tập trung (). select ()? - mplungjan
Tôi không thấy bất kỳ lý do gì khiến thiết bị cảm ứng thay đổi mức độ liên quan của việc chọn trước văn bản. Những gì bạn nói về một thiết bị cảm ứng có thể được nói như nhau về một thiết bị không chạm. Tôi muốn chọn trước văn bản khi người dùng chọn chạm vào một mục để chỉnh sửa nó. Trong hầu hết các trường hợp, người dùng có thể muốn thay thế các nội dung hiện có trong trường hợp đó họ có thể làm điều đó mà không cần phải chạm và kéo thêm nữa. Trong các trường hợp khác khi họ muốn chỉnh sửa nội dung hiện có, họ có thể bỏ chọn hoặc thay đổi lựa chọn. - sroebuck
Thật không may .focus (). Select () không hoạt động. - sroebuck
Tôi đang bắt đầu một tiền thưởng về vấn đề này. Mục tiêu của tôi là giúp người dùng dễ dàng nhấp vào vùng văn bản của tôi và nhấn "Sao chép" để sao chép văn bản vào khay nhớ tạm. - Dan Fabulich
Tương tự ở đây .. có vẻ như có rất nhiều phương pháp không hoạt động trong Mobile Safari .select () và .focus () là hai trong số đó.


Các câu trả lời:


setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select


85
2018-06-10 05:54



Điều này hoạt động, cảm ơn! - jrummell
Điều này làm việc cho tôi, nhưng phải bao gồm việc dừng mouseup trên cùng một đầu vào. - DuStorm
Điều này không hiệu quả với tôi trên iPad hoặc iPhone - Doug
Điều này chỉ làm việc cho tôi nếu tôi kích hoạt .focus() trên đầu vào trước khi gọi input.setSelectionRange. Nếu bạn đang lắng nghe focus sự kiện trên đầu vào, hãy nhớ tính đến vòng lặp vô hạn. - allieferr
Một lưu ý đáng chú ý: điều này sẽ không hoạt động trên textareas nếu chúng có readonly tập hợp thuộc tính. - JayPea


Không có gì trong chuỗi này hoạt động cho tôi, dưới đây là những gì hoạt động trên iPad của tôi:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

25
2017-09-15 19:43



điều này làm thủ thuật f ** kin! Cảm ơn bạn! hoạt động với sự kiện 'nhấp' - saike


Xem fiddle này: (nhập một số văn bản trong hộp nhập liệu và nhấp vào 'chọn văn bản')

Nó đang chọn văn bản trong hộp nhập liệu trên iPod của tôi (thế hệ thứ 5 iOS6.0.1), mở bàn phím và cũng hiển thị menu Cắt / Sao chép / Đề xuất ...

Sử dụng javascript đơn giản. Không thử với jQuery

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

Lưu ý rằng số 999 chỉ là một mẫu. Bạn nên đặt các số này thành số ký tự bạn muốn chọn.

CẬP NHẬT:

  • iPod5 - iOS6.0.1 - Làm việc ok.
  • iPad1 - iOS5.1.1 - Chỉ văn bản được chọn. Nhấn chọn một lần để mở menu Cắt / Sao chép
  • iPad2 - iOS4.3.3 - Chỉ văn bản được chọn. Nhấn chọn một lần để mở menu Cắt / Sao chép

Đối với hai người cuối cùng, bạn có thể thử nghiệm bằng cách kích hoạt sự kiện nhấp chuột trên input thành phần

CẬP NHẬT: (07-10-2013)

  • iPod5 - iOS7.0.2 - Sử dụng fiddle trong liên kết: Không thể nhìn thấy văn bản đã nhập trong hộp nhập liệu.                   Nhấn chọn chuyển hướng tôi đến facebook.com (??? wtf ???)                   không biết chuyện gì đang xảy ra ở đó.

CẬP NHẬT: (14-11-2013)

  • iOS 7.0.3: Nhờ nhận xét từ binki cập nhật rằng                    .selectionStart và .selectionEnd  làm công việc.

CẬP NHẬT: (15-01-2015)

  • iOS 8.x.x: Cảm ơn nhận xét từ Michael Siebert. Lấy từ bình luận:                   Tôi đã phải lắng nghe cho cả sự kiện tập trung và nhấp chuột và sau đó setTimeout / _. Debounce                   để làm cho nó hoạt động trong cả hai trường hợp: hãy nhấp vào đầu vào hoặc tiêu điểm thông qua tabbing

23
2017-12-07 10:26



Bạn là anh hùng của tôi cho ngày hôm nay! Làm việc như một say mê! ;-) - andi1984
@ andi1984 nơi tôi xác nhận huy hiệu anh hùng? - bart s
Bạn có biết về khả năng tương thích với các phiên bản iOS khác không? Nó có hoạt động trên iOS5 và iOS4 không? - andi1984
Hoạt động cho tôi trên iOS6 NHƯNG a) không hoạt động trên Chrome trên máy tính để bàn b) không hoạt động khi nhập văn bản bị tắt :( Trường hợp sử dụng của tôi: Tôi tạo URL duy nhất và muốn chia sẻ nội dung. - Michael Freeman
@ tôi sẽ đoán rằng bạn đã kết thúc trên Facebook vì trình đơn "Chia sẻ" ở jsfiddle phải được điều sai lầm và có thể chạm vào trong khi có thể nhìn thấy được. Tôi đã tự mình nhấp vào nút Twitter vô hình khi thử nghiệm với iOS-7.0.3 trên iPad. Tôi cũng thấy rằng khi tôi nghĩ rằng tôi đang khai thác <input/>, iPad nghĩ rằng tôi đã khai thác trong cửa sổ "CSS" của jsfiddle (trong đó bất kỳ thứ gì tôi đã gõ là vô hình). Khi tôi đã nhấn vào máy của tôi theo đúng hướng <input/>, nút “chọn văn bản” của bạn hoạt động hoàn toàn tốt trên iOS-7.0.3 :-). - binki


Thật khó để chứng minh một điều tiêu cực, nhưng nghiên cứu của tôi cho thấy đây là một lỗi trong Mobile Safari.

Lưu ý rằng focus () hoạt động, nhiều hơn hoặc ít hơn — mặc dù nó có thể yêu cầu nhiều lần nhấn để thành công và không cần thiết nếu bạn đang cố gắng phản hồi người dùng chạm vào trường đang được đề cập khi bản thân vòi nước sẽ cung cấp cho trường tiêu điểm. Thật không may, chọn ()  đơn giản là không hoạt động trong Mobile Safari.

Đặt cược tốt nhất của bạn có thể là một báo cáo lỗi với táo.


22
2017-08-30 09:39



Thử nghiệm của chúng tôi cho thấy giống nhau. Đó là một lỗi / thiếu tính năng trong safari di động. - Nir Levy
FWIW, nó hoạt động trong Chrome Desktop và Trình duyệt Android, cũng dựa trên WebKit. - jrummell


Xin lỗi, trong bài viết trước của tôi, tôi đã không nhận thấy Javascript ngụ ý rằng bạn muốn có câu trả lời trong Javascript.

Để có được những gì bạn muốn UIWebView với javascript, Tôi đã xoay xở để thu thập hai thông tin quan trọng để làm cho nó hoạt động. Không chắc chắn về trình duyệt dành cho thiết bị di động.

  1. element.setSelectionRange(0,9999); làm những gì chúng tôi muốn

  2. sự kiện mouseUp đang hoàn tác lựa chọn

Do đó (sử dụng Prototype):     

    input.observe ('focus', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ('mouseup', hàm (sự kiện) {
      event.stop ();
    });

không lừa.

Matt


7
2017-07-25 08:03



Chúng tôi đang gặp vấn đề tương tự và nhận thấy giải pháp của bạn đã hoạt động - nhưng chúng tôi đang sử dụng jquery (trên thiết bị di động). / * chọn văn bản bên trong fill-in * / $ ("input"). focus (function () {this.setSelectionRange (0, 9999); return false;}) .mouseup (function () {return false;} ); - DuStorm
Tôi đang sử dụng iOS 8 trên iPad và iPhone và mã từ @DuStorm (bình luận ở trên đây) là thứ duy nhất làm việc cho tôi trong số tất cả các câu trả lời được đưa ra ở đây. Để nhắc lại, sau đây ít nhất hoạt động trên iOS 8 trong Chrome và Safari: $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; }); - Aaron Jessen
Tôi đã phải sử dụng focusin thay vì tập trung để làm việc này, iOS 7 - Lucas


Có vẻ như tập trung sẽ hoạt động nhưng chỉ khi được gọi trực tiếp từ sự kiện gốc. Gọi lấy nét bằng cách sử dụng một cái gì đó như SetTimeout không xuất hiện gọi lên bàn phím. Kiểm soát bàn phím ios rất kém. Nó không phải là một tình huống tốt.


3
2018-03-22 03:02





Một cái gì đó như sau đang làm việc cho tôi trên Webkit đi kèm với Android 2.2:

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

Xem Chromium Số phát hành 32865.


1
2018-01-20 04:14





Với iOS 7 trên iPad, cách duy nhất mà tôi có thể thực hiện công việc này là sử dụng <textarea></textarea> thay vì <input> cánh đồng.

ví dụ.

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

Làm thế nào để ngăn chặn người dùng thay đổi văn bản bên trong khu vực là khó khăn hơn, kể từ khi bạn làm cho textarea chỉ đọc các trick lựa chọn sẽ không làm việc nữa.


1
2018-02-05 16:01