Pour certains besoins personnels, je me suis concocté un clavier virtuel en JavaScript pour les sites web. En réalité, j’ai repris le code de Brian Huisman (GreyWyvern) que j’ai grandement amélioré (plus léger, beaucoup plus rapide, plus joli, plus de fonctions, code plus propre…).


Vous pouvez l’utiliser en bookmarklet. Il suffit de mettre ce lien en favori, d’afficher une page, de cliquer sur le bookmarklet, puis de cliquer dans un champ à remplir d’un formulaire :

javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?french';document.head.appendChild(s);void(null);

(ou alors glissez CE LIEN sur votre barre de favoris)

Notez que le « french » correspond au clavier virtuel par défaut qui est affiché. Vous pouvez le remplacer par l’un de ceux-ci : albanian, arabic, armenian-e, armenian-w, assamese, azebaijani-cyr, azebaijani-lat, belarusian, bengali, bosnian, bulgarian-ph, burmese, canadian-fr, chinese-bapomofo-ime, chinese-cangjie-ime, czech, danish, dari, devanagari, dingbats, divehi, dutch, dvorak, esperanto, estonian, farsi, faeroese, finnish, french, georgian, german, greek, gujurati, hebrew, hindi, hungarian, icelandic, irish-gaelic, italian, japanese-kana, kazakh, kannada, khmer, korean, kurdish, kyrgyz, latvian, lithuanian, macedonian-cyr, malayalam, maltese48, marathi, misc-symbols, mongolian-cyr, norwegian, pashto, pinyin, polish, polish-prog, portuguese-br, portuguese, punjabi, romanian, russian, serbian, slovak, spanish, swedish, swiss-fr, swiss-de, syriac, tamil, tatar, telugu, thai-kedmanee, thai-pattachote, turkish-f, turkish-q, ukrainian, uk, urdu, urdu-phonetic, us-int, us-std, uzbek-cyr, vietnamese, yiddish.

Notez qu’alors le clavier ne sera que cliquable.
Si vous voulez émuler les touches (encore un peu bogué) avec les frappes au clavier (en mode qwerty, un « A » affiche un « q »), il suffit d’ajouter un « ,true » après le « french » :

javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?french,true';document.head.appendChild(s);void(null);
(ou alors glissez CE LIEN sur la barre de favoris)

Le code Javascript et le fichier CSS sont là (licence GNU). Il sont incluables directement dans du HTML, mais dans ce cas merci de télécharger le code sur votre site plutôt que de le lier ici :
http://dl.lehollandaisvolant.net/virtual-kb/keyboard.js
http://dl.lehollandaisvolant.net/virtual-kb/keyboard.js.css

Je ne pense pas faire évoluer ce bookmarklet d’avantage. En revanche, je compte ne faire qu’une version améliorée pour le japonais (hiragana/katakana) uniquement (où quand on tape « ha » ça me sort « は »).

Le code est sous licence GNU, donc n’hésitez pas à le reprendre et à le modifier.

31 commentaires

gravatar
TD a dit :

Chez moi ça ne marche que pour les textarea. Le clavier ne s'affiche pas sur les autres champs. (J'utilise Opera 12.16.)

gravatar
Defett a dit :

De même pour moi, sous firefox 22.0, ça ne fonctionne que sur les textarea, et apparemment on ne peut pas le rouvrir une fois le clavier fermé (à moins d'actualiser la page).

gravatar
Ubli a dit :

Ce code JavaScript est plutôt intrusif, je trouve. De plus le chargement du code se fait au "clique", d'où le temps de latence.

gravatar
Baronsed a dit :

Ça pose problème quand on descend dans une zone de texte : on ne peut pas déplacer le clavier, qui recouvre alors le texte. Je pense qu'un bouton pour lui donner deux positions (en haut à gauche et en bas à droite par exemple) ferait l'affaire.
Autrement, je pense que ça a de l'avenir en tant qu'extension.

gravatar
Le Hollandais Volant a dit :

@Defett : il y a un petit clavier en haut à droit de l’écran, il est vert quand c’est actif et rouge quand il est toujours là mais inactif.

@Ubli : Intrusif… C’est une question de confiance envers moi.
Je donne les sources, tu peux vérifier : elle n’enregistre rien du tout, ni ne m’envoie quoi que ce soit.
Après je te donne ma parole que je ne fais aucun traçage ni traitement à chaque fois que le script est téléchargé chez moi.
Reprends le code et héberges-le ailleurs, c’est libre. tu peux aussi l’ajouter en user-JS dans ton navigateur, comme un add-on.


@TD :
@Defett : un petit problème sur certains input (de type="url" ou "email"…), mais autrement, je n’ai pas de soucis sous Firefox ni Chrome, ni même IE…

gravatar
TD a dit :

@Le Hollandais Volant : effectivement, c'est un problème de type de champ. Ça marche sur un <input type="text"> mais par sur les autres types.

gravatar
jenesuispersonne a dit :

Merci Timo pour ce clavier virtuel que j'ai installé à une collègue et qui en est ravie.

mais j'aimerais savoir si il faut mettre à jour le bookmarklet pour cette nouvelle version ou pas ?

gravatar
Le Hollandais Volant a dit :

@jenesuispersonne : Non, si tu utilises le bookmarklet que je donne, une mise à jour sera directement prise en compte aussitôt que je le met en ligne (à moins que ton navigateur utilise un système de cache trop agressif).

gravatar
G-rom a dit :

Pourquoi ne pas le mettre sur Github (ou autre gestionnaire de version) ? Ça sera plus facile pour ceux qui veulent t'aider à l'améliorer nan ?

gravatar
-Eyrun- a dit :

Je l'utilise en japonais, c'est très pratique... une fois qu'on a mémorisé la position des kanas, bizarre mais pourquoi pas.
Par contre, je n'arrive décidément pas à mettre la main sur le "ri". C'est moi qui fait un blocage, où il n'y est vraiment pas ? :/

gravatar
Le Hollandais Volant a dit :

@-Eyrun- : Anéfé, dans une des versions elle n’y était pas. Maintenant elle doit y être (si ça ne marche pas, faut rafraîchir le cache).

(troisième touche avant le « Enter ».)

@jerrywham : Suffit de faire un marque page / favori / signet dans ton navigateur, et dont l’adresse est le code que j’ai donné : http://lehollandaisvolant.net/img/Capture-Proprietes-de-Keyboard.png

Il faut ensuite mettre le signet/favoris/marque page sur la barre personnelle et tu cliques dessus quand tu es sur une page où tu veux avoir le clavier.

gravatar
Le Hollandais Volant a dit :

@nonos : Pas vraiment compris le rapport avec la définition de « intrusif » que je connais.
Je sais que ce code n’est absolument pas propre (il l’est pourtant plus que ce que j’ai repris), mais ça marche et il ne déforme en rien les pages visitées.

gravatar
nonos a dit :

Intrusif, dans le sens où javascript désactivé ne permet par exemple plus d'avoir des fonctionnalités dans de bonnes conditions, voire plus du tout, et cela oblige le visiteur à activer javascript (quand il le peut),
intrusif dans le sens où ça oblige.

C'est le plus souvent un problème d'accessibilité.

Remarque bien, je ne dis pas que c'est approprié dans le cas de ton script, j'ai pas regardé et trop peu d'expertise pour en juger.;-)

Bonne journée !

gravatar
Le Hollandais Volant a dit :

@nonos : ah, je comprend mieux. Ouais, ben… Je peux difficilement faire un clavier comme ça en CSS ou en HTML.

Normal que mon clavier en JavaScript (JS) ne marche pas si tu désactive le JS.

Le JS comme les cookies font partie des technologies « normales » du web. On peut les désactiver, mais faut pas râler ensuite que ça ne marche pas.

Je comprend parfaitement les raison qui poussent les internautes à les bloquer (je fais pareil pour certains site) : à cause des abus, etc. Mais un navigateur sécurisé ne devrait pas obliger l’internaute à faire tout ça…

Remarque bien, je ne dis pas que c'est approprié dans le cas de ton script, j'ai pas regardé et trop peu d'expertise pour en juger.;-)

Je comprend bien, c’est une question de confiance après. Ma parole est ce qu’elle est (ou ce que vous voulez bien lui donner), mais je vous assure que mon script n’est pas un méchant script.
Mon script étant libre et à sources-ouverts, mentir n’est pas dans mon intérêt ici.

gravatar
nonos a dit :

An nan mais j'ai l'impression que vous êtes passé à côté de la raison de mon intervention,

je ne dis pas du tout que votre script est malveillant,

je ne vous reproche pas d'avoir fait en js un script nécessitant js :)

mais comme Ulbi n'avait pas été compris semblait-il (maintenant c'est sur :p),
j'ai apporté quelques infos.

Tout ça dans la bonne humeur et au soleil (enfin à l'ombre), loin de vouloir que vous justifiez quoi que ce soit.

Bon après-midi !

gravatar
Kevin a dit :

Fantastique, mais il n'y a pas de français (Suisse) ?

gravatar
Stooff a dit :

Je ne pense pas faire évoluer ce bookmarklet d’avantage. En revanche, je compte ne faire qu’une version améliorée pour le japonais (hiragana/katakana) uniquement (où quand on tape « ha » ça me sort « は »). +1

Merci pour le taf, c'est hyper-pratique !!!

gravatar
JeromeJ a dit :

Si certains d'entre vous, non codeurs, veulent une version qui demande dynamiquement la disposition clavier (c'était mon cas), voici le code :

javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?'+prompt('Lang?')+',true';document.head.appendChild(s);void(null);


( http://www.olissea.com/mb/links/1/?c-NLSg )

@Timo: Il serait plus pratique que tu nous fournisses également le lien snippet directement, qu'on puisse n'avoir plus qu'à le drag & drop, c'est chiant (et moins KISS) de devoir créer un bookmark manuellement :)

(D'ailleurs je râle de pas pouvoir utiliser de l'HTML directement sur mon shaarli :o (sans devoir aller toucher au code; même si je comprend les motivations d'un tel choix; une option ptet pour résoudre ça ?) sinon je l'aurais directement proposé aussi perso :p)

gravatar
Guenhwyvar a dit :

@JeromeJ :

Il serait plus pratique que tu nous fournisses également le lien snippet directement, qu'on puisse n'avoir plus qu'à le drag & drop, c'est chiant (et moins KISS) de devoir créer un bookmark manuellement :)

Personnellement, si je surligne le « lien » javascript et que je le fais glisser dans ma barre de marque-pages, ça me crée un marque-page automatiquement.

gravatar
Guenhwyvar a dit :

@JeromeJ :

Si certains d'entre vous, non codeurs, veulent une version qui demande dynamiquement la disposition clavier (c'était mon cas)

À quoi ça sert ? Autant afficher directement la langue par défaut, et changer ensuite sur le clavier affiché, ça fait gagner du temps si on veut utiliser celle par défaut.

gravatar
Alain Ternaute a dit :

Super-utile ! Merci !

Il ne manque plus que les caractères de nos voisins terribles et inévitables (sur le Net du moins) :
Les emojis de nos chers kikoolols ! :D

azy timo steuplay!!!

Les commentaires sont fermés pour cet article