javascript - 使用 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 上。

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

有没有一种方法可以让 contenteditable div 在 android 和 iOS 设备上关闭软键盘，当 div 被聚焦时按下回车键？

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>