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

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

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

input.setSelectionRange(0, 9999);

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

Không có gì trong chuỗi này hiệu quả với tô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);

Thật khó để chứng minh đ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 tiêu điểm () hoạt động, dù ít hay nhiều — 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 nhấn vào trường được đề cập vì chính thao tác nhấn sẽ cung cấp cho trường tiêu điểm. Thật không may, select () là chỉ đơn giản là không có chức nă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 Apple .

Xem trò chơi này : (nhập một số văn bản vào 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 (iOS6.0.1 thế hệ thứ 5), 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ử điều này 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 - Hoạt động tốt.
• iPad1 - iOS5.1.1 - Chỉ văn bản được chọn. Nhấn vào lựa chọn một lần để mở menu Cắt / Sao chép
• iPad2 - iOS4.3.3 - Chỉ chọn văn bản. Nhấn vào lựa chọn một lần để mở menu Cắt / Sao chép

Đối với hai phần 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 vào inputphần tử

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 sẽ 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ững nhận xét từ binki cập nhật rằng .selectionStartvà .selectionEnd thực hiện công việc.

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

• iOS 8.xx: Cảm ơn nhận xét từ Michael Siebert . Trích từ nhận xét: Tôi đã phải lắng nghe cả sự kiện tiêu điểm VÀ nhấp chuột và sau đó gỡ lỗi setTimeout / _. Để làm cho nó hoạt động trong cả hai trường hợp: nhấp vào đầu vào hoặc tiêu điểm thông qua tab

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 trong UIWebView bằng javascript , tôi đã cố gắng thu thập hai phần thông tin quan trọng để làm cho nó hoạt động. Không chắc chắn về trình duyệt 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', function (event) {
      event.stop ();
    });

thực hiện thủ thuật.

Matt

Có vẻ như tiêu điểm sẽ hoạt động nhưng chỉ khi được gọi trực tiếp từ một sự kiện gốc. gọi tiêu điểm 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. Khả năng kiểm soát của bàn phím ios rất kém. Đó không phải là một tình huống tốt.

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 Sự cố Chromium 32865 .

Với iOS 7 trên iPad, cách duy nhất mà tôi có thể làm cho công việc này là sử dụng thực sự <textarea></textarea>thay vì <input>trườ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 người dùng thay đổi văn bản bên trong khu vực khó hơn, vì bạn làm cho vùng văn bản chỉ đọc, thủ thuật lựa chọn sẽ không hoạt động nữa.

Tôi đã điên đầu tìm kiếm giải pháp này, trong khi tất cả các câu trả lời của bạn đã giúp nó mở ra một hộp giun khác cho tôi.

Khách hàng muốn người dùng có thể nhấp và chọn tất cả , đồng thời cho phép người dùng 'tab' và chọn tất cả trên iPad (với bàn phím bên ngoài. Tôi biết, thật điên rồ ...)

Giải pháp của tôi cho vấn đề này là sắp xếp lại các sự kiện. Tiêu điểm đầu tiên , sau đó nhấp vào , sau đó chạm vào bắt đầu .

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

Tôi hy vọng điều này sẽ giúp ích cho ai đó, vì bạn đã giúp tôi rất nhiều lần.

Nếu bạn đang sử dụng các trình duyệt tuân thủ HTML5, bạn có thể sử dụng placeholder="xxx"trong inputthẻ của mình . Điều đó sẽ làm công việc.