Android键盘按键不返回任何内容和keydown返回229答案

【问题标题】：Android keyboard keypress not returning anything & keydown returning 229Android键盘按键不返回任何内容和keydown返回229
【发布时间】：2020-12-26 03:15:20
【问题描述】：

在我的作品集中，我制作了一个模拟 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/) 到它上面，它会显示下一个输入，您可以按照页面中上面动态给出的说明进行填写。

我的问题如下。当在桌面网络浏览器上使用物理键盘时，该页面运行良好。它开始在手机上变得糟糕透顶。 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)" 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 & 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 （它可能没有完全更新，但可以在桌面上使用，上面写了一些修改过的代码）。

非常感谢你们找到的任何解决方案！

【问题讨论】：

标签： javascript android forms google-chrome keycode

【解决方案1】：

浏览器不再支持keypress event

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

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

【讨论】：