Est-ce que les événements clavier concernent uniquement les éléments éditables ?

Salut,

Est-ce que les événements clavier concernent uniquement les éléments éditables (textarea, input, contenteditable="true") ?

Comment faire pour écrire les lettres tapées au clavier dans une div (non éditable) ?

En interceptant les keydown sur le body ?

Merci oui en effet si j'ai une seule div par exemple... (faut-il que le body soit éditable ?)

Mais si j'en ai plusieurs (genre plusieurs éditeurs) il faudra écrire dans celui qui a le focus ???

Je pense à une textearea transparente par dessus la div, bonne ou mauvaise idée ?

-------------

PS :En tous cas, est-ce confirmé que les événements clavier concernent uniquement les éléments éditables (textarea, input, contenteditable="true") ?

ben non colle un id au div voulu ...

Oui d'accord mais comment je fais pour savoir dans quel div l'utilisateur veut écrire ? Généralement il veut écrire sur celui qui a le focus mais est-ce qu'un div no éditable peut avoir le focus ? A moins que je doive gérer le focus moi-même ?

PS : J'ai trouvé cet exemple : https://javascript.info/task/editable-div et celui-ci plus visuel : https://javascript.info/task/edit-td-click

sur le click du div colle son id dans une variable ...

https://jsfiddle.net/52dbxg4v/7/

Là on ajoute juste à la suite on ne prend pas en compte la position du curseur ni le range des keycode acceptés ...

Oui merci j'ai aussi pensé à ça...

Mais après réflexion il y aura un inconvénient : les "éditeurs" ne seront pas des modules indépendants genre on en met un dans sa page html et hop ça fonctionne tout seul... Si je gère les événements clavier de chaque éditeur placé dans la page html depuis le body alors il faudra que j'ajoute à chaque fois ce gestionnaire à la page ce qui n'est pas insurmontable je pense mais si dans la page on utilise d'autres choses (qu'un éditeur) qui nécessitent aussi une gestion des événements clavier alors ça complique les choses...

PS : J'ai vu que l'éditeur ACE utilise une textarea, celle-ci est apparemment de la taille d'un caractère et elle est placée à chaque fois là où est le curseur (en fait si ça se trouve c'est elle qui sert aussi de curseur).

Ah j'ai répondu avant d'avoir vu ton exemple, je vais regarder... Merci.

J'ai copié ton code dans VSCode pour l'analyser...

Oui ça marche bien, tu as en quelques sortes géré toi-même le focus, ça me donne le principe...

Prochaine étape : ajouter un curseur et sa gestion !

Là ça rejoint le fil déjà ouvert : caretPositionFromPoint() | caretRangeFromPoint() | moveToPoint()

Bon courage ^^

Merci, je vais en avoir besoin...

Sinon tu sais qu'il existe des editeurs tout faits que tu peux intégrer dans ta page ?

Oui je sais bien tu as raison mais en fait il y a plusieurs raisons qui m'ont données envies d'en faire un... Bon des fois je me dis que c'est vraiment du n'importe quoi de ré-inventer la roue mais bon j'ai commencé et c'est instructif je trouve, je préfère apprendre des choses en essayant de le faire moi même plutôt que d'étudier le code des autres et parfois mettre du temps à étudier et à tester l'api pour faire un truc et parfois s'apercevoir qu'on ne peut pas le faire (ou bien que c'est trop difficile pour moi) avec tel éditeur mais on peut avec un autre... Parfois un éditeur fait un truc que j'aime bien et pas un autre...

Mais je me rends compte que c'est plus difficile que je ne le pensais, il y a des problèmes auxquels j'étais loin de penser, je croyais par exemple m'en sortir avec une zone éditable (contenteditable="true") et c'est vrai que ça fait nativement une bonne partie du boulot et j'avais d’ailleurs commencé comme ça mais il y a eu le problème dont je parle ici : Comment les éditeurs gèrent-ils les documents de grande taille ? du coup il y a beaucoup de chose qu'on doit refaire soi-même...

Je ne dis pas que j'irais jusqu'au bout, je me rends bien compte qu'il y beaucoup à faire (plus que ce que je pensais) mais bon encore une fois c'est instructif, cela me pousse à étudier des choses que je n'aurais peut-être pas étudier autrement...