4

私は、モバイルデバイスで表示されるページにcontenteditable divを使用して、いくつかのものの入力を取得しています。divでEnterキーを押す通常のアクションではなく、ユーザーがEnterキーを押したときにソフトキーボードを非表示にします。それを機能させるための私の最初の試みは次のようになります：

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

ただし、これは入力の場合のようには機能しないようです。divはフォーカスを失いますが、キーボードはiOSまたはAndroidのどちらでも非表示になりません。

iPadのキーボードをdivcontenteditableで閉じるときにも解決策を試しましたが、機能しないことがわかりました。別のテキストフィールドに焦点を合わせてiOSのものでぼかしても、キーボードは閉じません。Androidでは、キーボードが通常のフィールドで使用されるものに変更され、Enterキーをもう一度押すとキーボードが閉じます。 contenteditable divフィールドでEnterキーを押すと、すぐに閉じるという予期された動作ではありません。自分でその入力フィールドをタップしてからjavascriptでぼかした場合、キーボードが正しく閉じるので、これは私には奇妙に思えます。

そのdivがフォーカスされているときにEnterキーが押されたときに、AndroidおよびiOSデバイスのソフトキーボードを閉じるコンテンツ編集可能なdivを作成する方法はありますか？

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 に答える