4

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

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 在该 div 获得焦点时按下回车键时关闭 android 和 iOS 设备上的软键盘？

4

1 回答 1

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>
于 2013-12-06T17:31:18.807 回答