Memilih teks secara terprogram di bidang input pada perangkat iOS (Safari seluler)


88

Bagaimana Anda secara terprogram memilih teks dari bidang input pada perangkat iOS, misalnya iPhone, iPad yang menjalankan Safari seluler?

Biasanya cukup memanggil .select()fungsi pada <input ... />elemen, tetapi ini tidak berfungsi pada perangkat tersebut. Kursor ditinggalkan begitu saja di akhir entri yang ada tanpa pemilihan yang dilakukan.


10
Saya tidak melihat alasan mengapa menjadi perangkat sentuh mengubah relevansi teks pra-pemilihan. Apa yang Anda katakan tentang perangkat sentuh dapat dikatakan sama baiknya dengan perangkat non-sentuh. Saya ingin memilih teks sebelumnya ketika pengguna memilih untuk menyentuh item untuk mengeditnya. Dalam kebanyakan kasus, pengguna cenderung ingin mengganti konten yang ada sehingga mereka dapat melakukannya tanpa menyentuh dan menyeret lebih jauh. Dalam kasus lain, ketika mereka ingin mengedit konten yang ada, mereka dapat membatalkan pilihan atau mengubah pilihan.
sroebuck

2
Sayangnya .focus (). Select () tidak berfungsi.
sroebuck

2
Saya memulai hadiah untuk masalah ini. Tujuan saya adalah membuatnya sangat mudah bagi pengguna untuk mengklik textarea saya dan mengetuk "Salin" untuk menyalin teks ke clipboard.
Dan Fabulich

Sama di sini .. sepertinya ada banyak metode yang tidak berfungsi di Mobile Safari .select () dan .focus () adalah dua di antaranya.

@sroebuck jawaban yang bagus untuk David W. Keith! jempolan!
eyurdakul

Jawaban:


95
input.setSelectionRange(0, 9999);

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


3
Ini bekerja untuk saya tetapi harus termasuk menghentikan mouseup pada input yang sama.
DuStorm

8
Ini tidak berhasil untuk saya baik di iPad atau iPhone
Doug

4
Ini hanya berfungsi untuk saya jika saya memicu .focus()masukan sebelum memohon input.setSelectionRange. Jika Anda mendengarkan focusacara di input, ingatlah untuk memperhitungkan loop tak terbatas.
allieferr

10
Gotcha yang layak disebutkan: ini tidak akan berfungsi pada textareas jika mereka memiliki readonlyset atribut.
JayPea

5
Saya menghabiskan lebih dari satu jam bermain dengan berbagai solusi. Memanggil setSelectionRange()dalam focuspenangan berfungsi saat Anda memicu secara .focus()terprogram, tetapi saat Anda mengetuk secara manual input teks di iOS, pemilihan tidak terjadi. Cukup dikatakan, yang perlu Anda lakukan adalah memanggil setSelectionRange()dalam setTimeout 0 dan berfungsi seperti yang diharapkan, apa pun yang memicu fokus.

30

Tidak ada di utas ini yang berfungsi untuk saya, inilah yang berfungsi di iPad saya:

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

ini lakukan trik sialan! Terima kasih! berfungsi dengan acara 'klik'
saike

Terima kasih banyak!!
Vaclav Kusak

26

Sulit untuk membuktikan negatif, tetapi penelitian saya menunjukkan bahwa ini adalah bug di Safari Seluler.

Perhatikan bahwa fokus () berfungsi, lebih atau kurang — meskipun bisa memerlukan lebih dari satu ketukan agar berhasil, dan itu tidak perlu jika Anda mencoba menanggapi ketukan pengguna pada bidang yang dimaksud karena ketukan itu sendiri akan memberikan bidang tersebut fokus. Sayangnya, pilih () adalah hanya non-fungsional di Mobile Safari.

Taruhan terbaik Anda mungkin laporan bug dengan Apple .


1
Pengujian kami menunjukkan hal yang sama. Ini adalah bug / fitur yang hilang dalam safari seluler.
Nir Levy

2
FWIW, berfungsi di Chrome Desktop dan Browser Android, yang juga didasarkan pada WebKit.
jrummell

24

Lihat biola ini : (masukkan beberapa teks di kotak input dan klik 'pilih teks')

Itu memilih teks di kotak input di iPod saya (generasi ke-5 iOS6.0.1), membuka keyboard dan juga menampilkan menu Potong / Salin / Sarankan ...

Menggunakan javascript biasa. Tidak mencoba ini dengan jQuery

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

Perhatikan bahwa angka 999 hanyalah contoh. Anda harus mengatur angka-angka ini ke jumlah karakter yang ingin Anda pilih.

MEMPERBARUI:

  • iPod5 - iOS6.0.1 - Bekerja dengan baik.
  • iPad1 - iOS5.1.1 - Hanya teks yang dipilih. Ketuk pilihan sekali untuk membuka menu Potong / Salin
  • iPad2 - iOS4.3.3 - Hanya teks yang dipilih. Ketuk pilihan sekali untuk membuka menu Potong / Salin

Untuk dua yang terakhir, Anda mungkin bereksperimen dengan memicu peristiwa klik pada inputelemen

UPDATE: (07-10-2013)

  • iPod5 - iOS7.0.2 - Menggunakan biola di tautan: Tidak dapat melihat teks yang diketik di kotak input. Menekan pilih akan mengalihkan saya ke facebook.com (??? wtf ???) tidak tahu apa yang terjadi di sana.

PEMBARUAN: (14-11-2013)

  • iOS 7.0.3: Berkat komentar dari Binki pembaruan bahwa .selectionStartdan .selectionEnd tidak bekerja.

UPDATE: (15-01-2015)

  • iOS 8.xx: Terima kasih atas komentar dari Michael Siebert . Diambil dari komentar: Saya harus mendengarkan kedua peristiwa fokus DAN klik, lalu setTimeout / _. Debounce untuk membuatnya berfungsi di kedua kasus: klik masukan atau fokus melalui tab

Anda adalah pahlawan saya untuk hari ini! Bekerja seperti pesona! ;-)
andi1984

3
@ andi1984 di mana saya bisa mengklaim lencana pahlawan?
bart pada

1
Tahukah Anda tentang kompatibilitas dengan versi iOS lainnya? Apakah ini berfungsi di iOS5 dan iOS4?
andi1984

1
Berfungsi untuk saya di iOS6 TETAPI a) tidak berfungsi di desktop Chrome b) tidak berfungsi saat input teks dinonaktifkan :( Kasus penggunaan saya: Saya membuat URL unik dan ingin memudahkan berbagi.
Mars Robertson

1
@barts Saya akan menebak bahwa Anda berakhir di Facebook karena menu "Bagikan" di jsfiddle harus kacau dan dapat diketuk sementara mungkin tidak terlihat. Saya akhirnya mengklik sendiri tombol Twitter yang tidak terlihat saat menguji dengan iOS-7.0.3 di iPad. Saya juga menemukan bahwa ketika saya mengira saya mengetuk Anda <input/>, iPad mengira saya mengetuk di panel "CSS" jsfiddle (di mana apa pun yang saya ketik tidak terlihat). Setelah saya mendapatkan ketukan saya diarahkan ke yang benar <input/>, tombol "pilih teks" Anda berfungsi dengan baik di iOS-7.0.3 :-).
binki

7

Maaf, di posting saya sebelumnya, saya tidak melihat Javascript yang menyiratkan bahwa Anda menginginkan jawaban dalam Javascript.

Untuk mendapatkan apa yang Anda inginkan di UIWebView dengan javascript , saya telah berhasil mengumpulkan dua informasi penting untuk membuatnya berfungsi. Tidak yakin dengan browser seluler.

  1. element.setSelectionRange(0,9999); melakukan apa yang kita inginkan

  2. Peristiwa mouseUp membatalkan pemilihan

Jadi (menggunakan Prototipe):

    input.observe ('focus', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ('mouseup', function (event) {
      event.stop ();
    });

berhasil.

Matt


3
Kami mengalami masalah yang sama dan menemukan solusi Anda berhasil - tetapi kami menggunakan jquery (sebenarnya seluler). / * pilih teks di dalam fill-in * / $ ("input"). focus (function () {this.setSelectionRange (0, 9999); return false;}) .mouseup (function () {return false;} );
DuStorm

1
Saya menggunakan iOS 8 di iPad dan iPhone, dan kode dari @DuStorm (komentar di atas ini) adalah satu-satunya hal yang berhasil bagi saya dari semua jawaban yang diberikan di sini. Untuk mengulangi, berikut ini setidaknya berfungsi di iOS 8 di Chrome dan Safari: $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });
Aaron Jessen

Saya harus menggunakan focusinalih-alih fokus agar ini berfungsi, iOS 7
Lucas

3

Sepertinya fokus akan berfungsi tetapi hanya jika dipanggil langsung dari peristiwa asli. memanggil fokus menggunakan sesuatu seperti SetTimeout tidak muncul panggil keyboard. Kontrol keyboard ios sangat buruk. Ini bukan situasi yang bagus.


1

Sesuatu seperti berikut ini bekerja untuk saya pada Webkit yang hadir dengan Android 2.2:

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

Lihat Masalah Chromium 32865 .


1

Dengan iOS 7 di iPad, satu-satunya cara saya dapat membuat ini bekerja adalah dengan menggunakan <textarea></textarea>alih-alih <input>lapangan.

misalnya

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

Cara mencegah pengguna mengubah teks di dalam area lebih sulit, karena jika Anda membuat area teks hanya baca, trik pemilihan tidak akan berfungsi lagi.


1

Saya menjadi gila mencari solusi ini, sementara semua tanggapan Anda benar-benar membantunya membuka kaleng cacing lain untuk saya.

Klien menginginkan pengguna untuk dapat mengklik dan memilih semua , dan juga membiarkan pengguna 'tab' dan memilih semua di iPad (dengan keyboard eksternal. Saya tahu, gila ...)

Solusi saya untuk masalah ini adalah, mengatur ulang acara. Fokus Pertama , lalu Klik , lalu sentuh mulai .

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

Saya harap ini membantu seseorang, karena Anda banyak telah membantu saya berkali-kali.


-4

Jika Anda menggunakan browser yang mendukung HTML5, Anda dapat menggunakannya placeholder="xxx"di inputtag Anda . Itu seharusnya melakukan pekerjaan itu.


8
Saya tidak berpikir ini adalah pertanyaan yang diajukan
caitriona
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.