Блог

В моем портфолио я создал форму, которая имитирует интерфейс macOS iMessage. Вы можете просмотреть страницу здесь (и напишите мне классное сообщение, которое попадет прямо в мою базу данных MySQL).

https://perso-etudiant.u-pem.fr /~letien04/Portfolio/assets/imessage_form.php

Однако у меня проблема с клавиатурой Android.

Принцип работы формы заключается в следующем :

Когда вы вводите ввод и нажимаете tab или enter, скрипт обнаруживает соответствующий код клавиши onkeypress или onkeydown (я временно включил оба, это не окончательно), затем «удалите» ввод, добавив класс .screen-reader-text (http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated /) на него, который отображаетследующий ввод, который вы можете заполнить, следуя инструкциям, динамически приведенным выше на странице.

Моя проблема заключается в следующем. Страница работает отлично, когда в настольном веб-браузере используется физическая клавиатура. На мобильном устройстве это становится дерьмовым. Onkeypress (консоль.logged) ничего не обнаруживает, а onkeydown обнаруживает только код ключа 229.

У меня есть доступ к консоли на Android с помощью этого приложения: https://play.google.com/store/apps/details?id=com.asfmapps.f12

Таким образом, форма абсолютно непригодна для использования на Android.

Вот соответствующий код :

 <form method="POST" action="target.php" autocomplete="off">
        <input type="text" required class="messageInput" placeholder="Your first name, last name and company name" name="names" style="z-index:3" onkeydown="sending(event,this)" onkeypress="sending(event,this)">
        <input type="text" required class="messageInput" placeholder="Your email adress" name="email" style="z-index:2" onkeydown="sending(event,this)" onkeypress="sending(event,this)">
        <textarea name="message" required rows="1" class="messageInput" style="z-index:0" placeholder="Your message"></textarea>
        <input type="image" src="../images/send_button.png" border="0" alt="Submit" />
    </form>
 

 function sending(e,el){
        
        var code = (e.keyCode ? e.keyCode : e.which);

        console.log(code);

        /*⬇ code == 13 → Return/Enter amp; code == 9 → Tab ⬇*/
        if(code == 13 || code == 9) {
            let val = el.value;

            if(val != ''){

                if(el.name == "names"){
                    document.querySelector('main').innerHTML  = `
                        <p class="message-sent">${val}</p>
                        <p class="message-received">Alright ${val}, nice to meet you ! Can I please ask you for your email address ? You can type it in the field below !</p>
                    `;
                } else if(el.name == "email"){
                    document.querySelector('main').innerHTML  = `
                        <p class="message-sent">${val}</p>
                        <p class="message-received">Thanks ! I'll be using this email address to reach you once I've read your message ! Talking about message, what is it ? You can type it below as well as before.</p>
                    `;
                }

                el.classList.add('screen-reader-text');
            }
        }
    }
 

Для любых дальнейших исследований вы можете найти полный код здесь :
https://github.com/LoicE5/Portfolio/blob/main/assets/imessage_form.php
(возможно, он не полностью обновлен, но работает на рабочем столе, и несколько измененный код написан выше).

Большое спасибо за любой путь решения, который вы, ребята, можете найти!

событие нажатия клавиши больше не поддерживается браузерами

При использовании виртуальных / мобильных клавиатур, формально известных как IME (редактор методов ввода), стандарт W3C гласит, что e.keyCode для KeyboardEvent должен быть 229, а e.key должен быть «Неопознанным».

источник: https://javascript.info/keyboard-events#mobile-keyboards