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

Question

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

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

但是，Android 键盘出现问题。

表格的工作原理如下：

当您填写输入并按 tab 或 enter 时，脚本会检测到相关的键码 onkeypress 或 onkeydown（我暂时启用了这两个键，这不是确定的），然后通过添加 .screen- 来“删除”输入reader-text class (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 （它可能没有完全更新，但可以在桌面上使用，上面写了一些修改的代码）。

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

Answer 1

keypress event 不再受浏览器支持

When using virtual/mobile keyboards, formally known as IME (Input-Method Editor), the W3C standard states that a KeyboardEvent’s e.keyCode should be 229 and e.key should be "Unidentified".

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

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

Android keyboard keypress not returning anything & keydown returning 229

javascript

forms

android

google-chrome

keycode