Pertanyaan Deteksi keyboard virtual vs keyboard perangkat keras


Saya telah memikirkan hal ini sementara waktu sekarang, dan saya tidak dapat menemukan cara untuk mengatasinya. Apakah ada cara untuk mendeteksi jika pengguna menggunakan keyboard virtual (perangkat lunak) atau keyboard tradisional (perangkat keras)?

Windows Surface yang baru memiliki keyboard sendiri di cover, dan untuk Android / iPad ada satu ton keyboard bluetooth yang berbeda.

Jadi, apakah ada di antara Anda yang memiliki masukan tentang ini?
Saya bertujuan untuk Android, iOS & Windows Tablet / Telepon.


Motivasi: (sangat subjektif)

Saat mengembangkan aplikasi web untuk tablet / ponsel cerdas, saya memahami bahwa lebih mudah - dalam banyak situasi - menggunakan keyboard JavaScript sebagai ganti keyboard perangkat lunak OS.

Katakanlah Anda ingin memasukkan kode PIN. Alih-alih memiliki setengah keyboard mengisi layar:

Perangkat lunak (OS) keyboard:

|----------------|
|    [ input]    |
|                |
|----------------|
|  1  2  3  4  5 |
|  6  7  8  9  0 |
|----------------|

Keyboard JavaScript:

|----------------|
|    [ input]    |
|    | 1 2 3|    |
|    | 4 5 6|    |
|    |_7_8_9|    |
|                |
|                |
|----------------|

Jika Anda perlu menangani banyak masukan, mungkin Anda ingin membuat overlay div dengan input dan menggunakan keyboard perangkat lunak:

|----------------|
| P1 P2    P3 P4 |
| [inp 1][inp 2] |
|----------------|
|    KEYBOARD    |
|                |
|----------------|

Tetapi jika pengguna memiliki keyboard hardware mereka sendiri, kami ingin membuat edit inline di tempat.


Saya telah mencari di sekitar SO dan menemukan posting ini: Aplikasi Web iPad: Mendeteksi Virtual Keyboard Menggunakan JavaScript di Safari? ... tapi jahitan ini hanya berfungsi di iOS - tidak yakin tentang browser.


32
2017-11-07 13:19


asal


Jawaban:


Saya tidak berpikir bahwa menimpa keyboard layar default adalah ide yang bagus, dan saya akan merekomendasikan pergi dengan apa yang disarankan Jani - keyboard virtual juga beradaptasi.

Tapi aku yakin itu mungkin untuk mendeteksi kebanyakan keyboard dengan resize acara dipasangkan dengan fokus di lapangan atau dengan pemantauan window.innerHeight (atau beberapa [a-z] * Tinggi lainnya) dan membandingkan nilai sebelum dan sesudah fokus lapangan.

Ini adalah kasus aneh dari deteksi fitur, jadi itu akan membutuhkan banyak eksperimen. Aku tidak akan melakukannya jika aku jadi kamu.


7
2017-11-15 21:48



Saya pikir pendekatan terbaik adalah mengkombinasikan atribut bentuk HTML5 dengan tautan keyboard virtual opsional.

Atribut bentuk HTML5 dapat digunakan untuk memicu berbagai jenis keyboard. Sebagai contoh, <input type="email">, <input type="number"> dan <input type="tel"> akan memicu jenis keyboard yang sesuai di iOS (tidak yakin tentang Android / WinPho / lainnya, tetapi saya akan membayangkannya melakukan hal yang sama), memungkinkan pengguna untuk memasukkan data dengan lebih mudah.

Jika Anda mau, Anda juga bisa menawarkan tombol untuk memicu numpad khusus di bawah kolom teks untuk browser seluler yang lebih lama yang non-HTML5. Mereka akan menampilkan bidang HTML5 baru sebagai bidang teks standar.

Anda dapat menggunakan browser sniffing untuk mendeteksi peramban seluler, tetapi jangan lupa bahwa mereka masih dapat mendukung hal-hal seperti keyboard bluetooth. Mengendus juga memiliki masalah yang hampir pasti akan kehilangan beberapa browser, dan salah mendeteksi orang lain, sehingga Anda tidak boleh bergantung padanya semata.


19
2017-11-12 08:02



Itu mungkin tidak mendeteksi keyboard. Tetapi saya akan mencoba mendeteksi jika pengguna menggunakan browser seluler. Karena perangkat yang memiliki keyboard virtual asli hampir dengan suara bulat berjalan di browser seluler.

Berikut ini skrip kecil yang bagus yang menggunakan jquery

Jika mereka tidak mobile hadir bidang input standar Anda.

Jika mereka ponsel tidak menampilkan bidang input (Jadi mereka tidak mendapatkan keyboard virtual), bukan memiliki bidang atau daftar tersembunyi yang diperbarui dengan jquery ketika mereka mengklik tombol untuk pinpad Anda.


1
2017-11-12 01:07



WURFL adalah kerangka serveride yang menawarkan banyak informasi tentang kemampuan perangkat yang meminta. Dengan wurfel di tempat, aplikasi Anda akan dapat melayani berbagai perangkat / grup perangkat dengan keluaran / markup yang dioptimalkan.

Salah satu keseruan yang paling sederhana adalah membedakan antara desktop, tabel dan smartphone.

Database (file xml) diperbarui secara berkala dan api resmi tersedia untuk java, php dan .net


1
2017-11-18 11:42



Saya menemukan pertanyaan baru beberapa hari yang lalu dan jawaban yang bagus yang dapat membantu masalah keyboard Anda.

Waktu habis pada jquery hover (sentuh)

Pada dasarnya ini menggunakan fungsi JQuery yang mengembalikan boolean jika ia mampu membuat acara sentuh.

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return true;
        } catch (e) {
           return false;
        }    
    }

    var touchPresent = hasTouch();
});

1
2017-11-17 11:56



Solusi prof bullet yang paling banyak berfungsi di Chrome / Safari dll. Dan di Android dan iOS pada 20-nov-2017 akan mendeteksi perubahan ketinggian div yang memiliki vh unit tinggi (tinggi tampilan)

Kemudian pada perubahan blur / fokus dari pemeriksaan input / textarea jika itu div sekarang memiliki tinggi 30% lebih sedikit (dalam piksel) daripada sebelumnya sebelum peristiwa buram / fokus tersebut.

CSS:

#height-div{height: 10vh;}

jQuery:

$(document).ready(function() {
    var initialHeight = $("#height-div").height();//gives current height in pixels! We save it for later comparisons 
}

Sekarang inilah keajaibannya:

$("input, textarea").focus(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});

$("input, textarea").blur(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});

0
2017-11-20 16:20