Android 键盘按键不返回任何内容 & 按键返回 229

如何解决Android 键盘按键不返回任何内容 & 按键返回 229

在我的作品集中，我制作了一个表格来模拟 macOs iMessage 界面。您可以在此处查看页面（并向我发送一条很酷的消息，该消息将直接进入我的 MysqL 数据库）。

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

但是，我遇到了 Android 键盘问题。

表单的工作原理如下：

当您填写输入并按下 Tab 或 Enter 时，脚本会检测相关的键码 onkeypress 或 onkeydown（我暂时启用了两者，这不是确定的），然后通过添加 .screen-reader-“删除”输入-文本类 (http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/) 到它上面，它显示下一个输入，您可以按照页面中上面动态给出的说明进行填充。

我的问题如下。当在桌面 Web 浏览器上使用物理键盘时，该页面运行良好。它开始在移动设备上变得糟糕。 Onkeypress (console.logged) 未检测到任何内容，而 onkeydown 仅检测到 229 keyCode。

我可以使用此应用访问 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)">
        <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 & 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 （它可能没有完全更新但可以在桌面上运行，上面写了一些修改过的代码）。

非常感谢您可能找到的任何解决方案！

解决方法

keypress event 不再受浏览器支持

使用虚拟/移动键盘时，正式称为 IME（输入法编辑器），W3C 标准规定 KeyboardEvent 的 e.keyCode 应为 229，e.key 应为“Unidentified”。

来源：https://javascript.info/keyboard-events#mobile-keyboards