Bagaimanakah program javascript memperoleh nilai kunci telefon?

Dengan populariti telefon pintar dalam kehidupan orang ramai, semakin banyak tapak web dan aplikasi mula menyesuaikan diri dengan peranti mudah alih. Pada terminal mudah alih, kaedah input pengguna juga berbeza daripada pada komputer tradisional. Salah satu perbezaan yang ketara ialah kaedah input. Untuk halaman web dan aplikasi, cara mengendalikan input pengguna dan mendapatkan nilai kunci yang betul pada peranti mudah alih telah menjadi isu penting.

JavaScript ialah bahasa pengaturcaraan yang biasa digunakan yang digunakan secara meluas dalam aplikasi bahagian hadapan. Dalam proses pembangunan HTML5 mudah alih, kebanyakan input pengguna perlu diproses dan ditapis. Oleh itu, mempelajari cara mendapatkan input papan kekunci pada peranti mudah alih menjadi tugas penting.

Secara umumnya, pada komputer, kami memperoleh maklumat input pengguna melalui acara mendengar. Untuk mendapatkan maklumat input papan kekunci pengguna pada peranti mudah alih, kami boleh menggunakan kaedah berikut:

1. KeyboardEvent

Dalam pelayar desktop, kami biasanya boleh menggunakan Pemantauan acara Papan Kekunci digunakan untuk mendapatkan nilai kunci pengguna, seperti aksara atau kekunci fungsi pada papan kekunci. Begitu juga, pada peranti mudah alih, kami juga boleh mencapainya dengan cara yang sama.

Dalam JavaScript, terdapat pendengar acara pada objek Window, iaitu "keydown", yang boleh mengembalikan nilai kekunci yang ditekan Kami boleh menggunakan acara ini untuk memantau ketukan kekunci pengguna pada peranti mudah alih.

window.addEventListener('keydown', function(event) {
  console.log(event.key);
});

Apabila pengguna menekan kekunci pada peranti mudah alih, peristiwa ini dicetuskan dan nilai kekunci yang ditekan dikeluarkan ke konsol. Nilai ini boleh digunakan dengan mudah untuk pelbagai pertimbangan logik dan pemprosesan data.

Walau bagaimanapun, dalam beberapa kes, kami mungkin perlu mendapatkan lebih banyak maklumat nilai kunci. Perlu diingatkan bahawa pada peranti mudah alih, objek acara papan kekunci adalah berbeza daripada objek dalam penyemak imbas desktop. Pada peranti mudah alih, objek acara papan kekunci mengandungi lebih banyak sifat, seperti sama ada kekunci Alt, Shift atau Ctrl ditekan, sama ada kekunci fungsi ditekan, dsb.

Jadi, jika kita perlu mendapatkan maklumat nilai utama tambahan ini, kita boleh menggunakan sifat lain yang disediakan oleh objek acara papan kekunci. Sebagai contoh, kita boleh menggunakan atribut kod untuk mendapatkan kod kunci yang sepadan dengan kunci:

window.addEventListener('keydown', function(event) {
  console.log(event.code);
});

Selepas menggunakan kod ini, kita boleh melihat kod kunci kekunci yang ditekan dalam output maklumat oleh konsol. Kod kunci ini ialah nombor yang mewakili nilai kunci maya yang sepadan dengan kekunci yang ditekan. Nilai ini unik merentas papan kekunci dan tidak bergantung pada bahasa input dan reka letak papan kekunci pengguna.

Selain itu, kami juga boleh menggunakan sifat lain KeyEvent untuk mendapatkan maklumat acara papan kekunci lain. Sebagai contoh, kita boleh menggunakan event.key untuk mendapatkan aksara yang sepadan dengan acara papan kekunci:

window.addEventListener('keydown', function(event) {
  console.log(event.key);
});

Pada peranti mudah alih, objek acara papan kekunci mungkin mengembalikan aksara yang berbeza bergantung pada kaedah input pengguna dan tempat semasa. Jadi untuk mendapatkan watak yang betul kita perlu mendapatkannya menggunakan harta acara.kunci.

2. Acara input

Selain menggunakan acara papan kekunci, kami juga boleh menggunakan acara input untuk memantau input pengguna pada peranti mudah alih. Tidak seperti acara papan kekunci, acara input boleh digunakan untuk memantau sebarang input pengguna, termasuk tulisan tangan dan input suara.

var inputElement = document.getElementById('input-element');

inputElement.addEventListener('input', function(event) {
  console.log(event.target.value);
});

Kod ini menggunakan peristiwa input untuk memantau input elemen input dan mengeluarkan nilai yang dimasukkan oleh pengguna pada konsol. Dalam fungsi pengendalian acara, kita boleh menggunakan event.target untuk mendapatkan objek elemen yang dimasukkan untuk mendapatkan nilai kotak input.

Adalah penting untuk ambil perhatian bahawa peristiwa input sedikit berbeza pada iOS dan Android. Pada iOS, peristiwa input tidak dicetuskan sehingga input selesai. Pada Android, peristiwa input mungkin dicetuskan apabila pengguna memasukkan.

3. Acara sentuh

Cara lain untuk mendapatkan input pengguna pada peranti mudah alih ialah menggunakan acara Sentuh. Peristiwa sentuh ialah jenis acara yang direka khusus untuk memantau operasi sentuhan pada peranti mudah alih. Jika tapak web atau aplikasi anda perlu menyokong input gerak isyarat dan operasi sentuh, maka menggunakan acara Sentuh ialah cara yang baik.

Dalam JavaScript, anda boleh menggunakan acara mula sentuh dan akhir sentuh untuk mendapatkan operasi akhbar dan lepas apabila pengguna menyentuh peranti input dengan jari mereka. Jika anda perlu mengesan bahawa pengguna sedang melakukan tekan lama, anda boleh menggunakan acara gerakan sentuh untuk menangkap operasi pengguna dan menentukan sama ada jari berada dalam kedudukan yang sama (ini biasanya menunjukkan operasi tekan lama).

var touchElement = document.getElementById('touch-element');

touchElement.addEventListener('touchstart', function(event) {
  console.log('Touch started');
});

touchElement.addEventListener('touchend', function(event) {
  console.log('Touch ended'); 
});

touchElement.addEventListener('touchmove', function(event) {
  if (event.touches.length == 1) {
    console.log('Long press detected');
  }
});

Dalam kod ini, kami menggunakan acara touchstart, touchend dan touchmove untuk mengesan operasi sentuhan jari pengguna. Apabila pengguna menekan atau melepaskan jari mereka, konsol akan mengeluarkan "Sentuh dimulakan" dan "Sentuh berakhir" apabila pengguna melakukan tekan lama, konsol akan mengeluarkan "Tekanan lama dikesan".

Perlu diambil perhatian bahawa terdapat sedikit kaedah menggunakan peristiwa Sentuh untuk menangkap maklumat input papan kekunci, dan ia hanya sesuai untuk beberapa senario tertentu yang memerlukan input gerak isyarat.

Ringkasan

Seperti yang telah kita lihat, terdapat banyak cara untuk mendapatkan maklumat input papan kekunci pada peranti mudah alih. Kami boleh menggunakan acara papan kekunci, acara input dan acara Sentuh untuk menyelesaikan operasi yang sepadan.

Walau bagaimanapun, perlu diingatkan bahawa kaedah mendapatkan maklumat input papan kekunci pada peranti mudah alih adalah lebih rumit daripada pada desktop. Acara papan kekunci dan acara Sentuh mungkin berkelakuan berbeza pada peranti mudah alih dan persekitaran penyemak imbas yang berbeza. Oleh itu, apabila melaksanakan fungsi input papan kekunci pada peranti mudah alih, ujian dan kerja penyahpepijatan yang mencukupi perlu dilakukan untuk memastikan keserasian, kebolehpercayaan dan kebolehgunaan kod.

Selain itu, apabila melaksanakan fungsi input papan kekunci, kami juga perlu mempertimbangkan isu keselamatan. Oleh kerana skrip JavaScript boleh diakses dan diubah suai sesuka hati, maklumat yang dimasukkan pengguna perlu dikendalikan dengan teliti untuk mengelakkan data daripada diganggu dan dicuri. Amalan terbaik adalah untuk mengesahkan dan menapis input pengguna di bahagian pelayan untuk meningkatkan keselamatan dan kebolehpercayaan tapak web dan aplikasi anda.

Atas ialah kandungan terperinci Bagaimanakah program javascript memperoleh nilai kunci telefon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!