使用 contenteditable div 时隐藏移动设备上的软键盘

Question

我正在使用 contenteditable div 来创建由移动设备查看的页面，以获取某些内容的输入。我希望当用户按下 Enter 时隐藏软键盘，而不是在 div 中按 Enter 的正常操作。我第一次尝试让它工作看起来像这样：

if event.keyCode == 13 #enter
  event.preventDefault() #to prevent the normal behaviour of enter
  @$("#the_editable_div").blur()

然而，这似乎不像输入那样有效。div 失去焦点，但键盘在 iOS 或 Android 上都不会隐藏。

我还尝试过在 div contenteditable 中关闭 iPad 上的键盘中的解决方案，但发现它不起作用。如果我专注于另一个文本字段并在 iOS 上模糊，它仍然不会关闭键盘，而在 Android 上我发现它将键盘更改为用于常规字段的键盘，再次按 Enter 将关闭键盘，但那就是这不是在 contenteditable div 字段中按下 Enter 时立即关闭的预期行为。这对我来说似乎很奇怪，因为如果我自己点击该输入字段，然后通过 javascript 模糊它，那么键盘就会正确关闭。

有没有办法让一个可内容编辑的 div 关闭 Android 和 iOS 设备上的软键盘，当该 div 聚焦时按下 Enter 键？

Answer 1

这个解决方法工作正常，至少在 Android 上（我无法在 iPad 上测试）：

<input type="text" id="ghostInput" style="position:absolute;top:-50px" />
<div id="myDiv" contenteditable="true" style="width:100%;height:100px;background-color:yellow"></div>
<script>
    var ghostInput = document.getElementById("ghostInput");
    ghostInput.onfocus = function () {
        ghostInput.blur();
    }
    document.getElementById("myDiv").onkeydown = function (e) {
        if (e.keyCode == 13) ghostInput.focus();
    }
</script>