fichu clavier virtuel

index.html

@@ -14,7 +14,7 @@
         <meta property="og:locale" content="fr_FR" />
         <style>
 body {
-    --vph: "100vh";
+    --vph: 100vh;
     display: flex;
     flex-direction: column;
     min-height: var(--vph);
@@ -151,16 +151,16 @@ const footer = document.querySelector('footer');
 const langue = document.documentElement.lang;
 let voix = null;
 
-question.addEventListener('keydown', e => {
+question.onkeydown = function(e) {
     if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
         e.preventDefault();
         e.target.form.requestSubmit();
     }
-});
+};
 
-question.addEventListener('focus', () => {
+question.onfocus = function() {
-    question.scrollIntoView({ block: 'nearest' });
+    question.scrollIntoView({ block: 'end', behavior: 'auto' });
-});
+};
 
 formulaire.addEventListener('submit', async (e) => {
     e.preventDefault();
@@ -204,7 +204,8 @@ formulaire.addEventListener('submit', async (e) => {
             } else {
                 paragraphe.innerHTML += lettre;
             }
-            paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
+            paragraphe.scrollIntoView({ block: 'end', behavior: 'auto' });
+            question.onfocus();
         }, t += 100 * Math.random());
     });
     setTimeout(() => {
@@ -212,11 +213,12 @@ formulaire.addEventListener('submit', async (e) => {
         paragraphe.classList.add('reponse');
         paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
         conversation.appendChild(paragraphe);
-        paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
+        paragraphe.scrollIntoView({ block: 'end', behavior: 'auto' });
         bouton_envoyer.disabled = false;
         bouton_envoyer.setAttribute("aria-busy", false);
         bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
-        question.focus()
+        question.focus();
+        question.onfocus();
     }, t);
 })
 
@@ -248,16 +250,13 @@ function charger_voix() {
     })
 
     bouton_synthese_vocale.disabled = false;
-    bouton_synthese_vocale.addEventListener('click', () => {
+    bouton_synthese_vocale.onclick = function() {
         boite_synthese_vocale.showModal();
-    });
+    };
-    bouton_fermer.addEventListener('click', () => {
+    bouton_fermer.onclick = bouton_annuler.onclick = function() {
         boite_synthese_vocale.close();
-    });
+    };
-    bouton_annuler.addEventListener('click', () => {
+    bouton_ok.onclick = function() {
-        boite_synthese_vocale.close();
-    });
-    bouton_ok.addEventListener('click', () => {
         boite_synthese_vocale.close();
         if (select_voix.value) {
             voix = liste_voix[select_voix.value];
@@ -268,7 +267,7 @@ function charger_voix() {
             window.localStorage.removeItem('voix');
             bouton_synthese_vocale.innerHTML = "🔈";
         }
-    });
+    };
 }
 if ('speechSynthesis' in window) {
     bouton_synthese_vocale.style.display = 'block';
@@ -288,11 +287,11 @@ if (SpeechRecognition) {
         bouton_reconnaissance_vocale.innerHTML = ""
         bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
 
-        reconnaissance.addEventListener('result', (event) => {
+        reconnaissance.onresult = function(event) {
             const transcript = event.results[0][0].transcript;
             question.value = transcript;
             if (!bouton_envoyer.disabled) formulaire.requestSubmit()
-        });
+        };
         reconnaissance.onspeechend =
         reconnaissance.onerror =
         reconnaissance.onnomatch = function () {
@@ -307,13 +306,11 @@ if (SpeechRecognition) {
 }
 
 // Adaptation au clavier virtuel du téléphone
-function onResize() {
+window.onresize = function() {
     document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
-    conversation.scrollTop = conversation.scrollHeight;
 }
-window.visualViewport?.addEventListener('resize', onResize);
+window.visualViewport?.addEventListener('resize', window.onresize);
-window.addEventListener('resize', onResize);
+window.onresize();
-onResize();
         </script>
     </body>