Javascript 在contenteditable div中捕获返回键

Javascript 在contenteditable div中捕获返回键,javascript,html,mobile,contenteditable,Javascript,Html,Mobile,Contenteditable,我正在构建一个使用contenteditable div作为输入需要计算的表达式的位置的。div侦听用户敲击返回键,然后将其文本内容传递给计算器引擎,清除自身,然后显示表达式的结果 在桌面浏览器上一切正常,但在移动浏览器下,当插入符号不在文本末尾时,按下回车键会出现一些奇怪的行为。有时按回车键会插入空格或换行符,有时会提交并清除插入符号之前的所有内容,在Chrome下似乎会创建一个新的div元素。知道我做错了什么吗 我已经在运行在Ubuntu 17.10上的Firefox 59.0.2和Chro

我正在构建一个使用contenteditable div作为输入需要计算的表达式的位置的。div侦听用户敲击返回键,然后将其文本内容传递给计算器引擎,清除自身,然后显示表达式的结果

在桌面浏览器上一切正常,但在移动浏览器下,当插入符号不在文本末尾时,按下回车键会出现一些奇怪的行为。有时按回车键会插入空格或换行符,有时会提交并清除插入符号之前的所有内容,在Chrome下似乎会创建一个新的div元素。知道我做错了什么吗

我已经在运行在Ubuntu 17.10上的Firefox 59.0.2和Chromium 65.0.3325.181以及运行在Windows 7上的Firefox 59.0.2中成功地测试了代码。我在Android 8.1.0上运行的Firefox 59.0.2和Chrome 65.0.3325.109中测试了代码,但都没有成功

window.addEventListener(“加载”,函数(){
“严格使用”;
var i=document.getElementById(“i”);
var o=document.getElementById(“o”);
i、 addEventListener(“按键”,功能(e){
如果(e.key==“输入”){
e、 预防默认值();
o、 textContent=i.textContent;
i、 textContent=“”;
返回false;
}
返回true;
});
});
div{
字体大小:24px;
填充:1em;
边框:1px纯黑;
最小高度:1米;
框大小:内容框;
边缘:1米;
}

试验

console.log
e.key
并查看当您按下回车键时它会记录什么。另外,我建议您使用
e.keyCode===13
而不是使用
e.key==“enter”
,因为某些浏览器会使用后者。在桌面上,每次按下回车键时,e.key都会记录到正确的键名,然后按回车键。奇怪的是,在移动设备下,并不是每个按键都会记录一些东西,只有返回键一直在工作(仍然是“回车”)。这似乎表明事件不会在每次按键时触发。顺便说一句,我刚刚注意到,使用
keydown
而不是
keydown
。使用
keydown
似乎没有效果