Question

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

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模糊它，那么键盘就会正常关闭。

当div被聚焦时，是否有办法让一个可以关闭Android和iOS设备上的软键盘的contenteditable 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>

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

1 个答案: