Safariのオートコンプリートを防ぐ方法

　

iphone Safariでの入力補完に関して

　Webサイトの入力欄において、iphoneのSafariで入力補完が行われ、想定した値が入力できないという話がありました。
この入力補完の厄介な点は以下の通り
・on/offはユーザのデバイスの設定でしか制御できない
・autocomplete="off"を無視して入力補完してくる
・近くのテキストから候補を予測して、値を入力してくる

下記のサイトを参考にしたがどうやらサイト側で入力補完自体を無効にする手段はないっぽいということが分かりました。
・Safariのオートコンプリートの不思議な挙動
・Safariのパスワードの自動入力を防ごうとしたら結構めんどくさかった話
・iPhone Safari の「連絡先を自動入力」機能が賢くなりすぎて、電話番号じゃない入力欄に電話番号を自動補完しちゃうから困った話

　どうしても入力補完をさせない入力欄を作る必要があり、いろいろ試したが、やはりユーザ側のデバイスの設定で無効にする以外、入力欄の入力補完をサイト側で禁止する方法は見つかりませんでした。

解決に至った回避策

　「そもそも入力欄にしなければ、入力補完などできないのではないか？」と考え、inputタグを使用しない方法で解決に至りました。

test.html

    <div contentEditable="true" onkeyup="setInputValue" class="input-box" id="displayinput"> 表示する入力欄 </div>
    <input value="" id="hiddeninput" style="display: none;"/>

    <script>
        var inputValue = document.getElementById('displayinput').innerHTML;
        document.getElemetById('hiddeninput').value = inputValue;
    </script>

本来の入力欄とは別のcontentEditable="true"を用意して、input-boxクラスで入力欄っぽいスタイルをあててあげれば、入力補完の利かない入力欄が完成します。
さらにその要素のinnerHTMLを本来の入力欄の値に入れてあげれば、既存のコードの修正も最低限で済みます。
本来の入力欄はdisplay:noneにして、非表示にします。

ちなみに上記のdivの入力欄ではtype属性は使えませんがinputmode属性が使えるので、スマホ入力時のキーパッドの指定も出来ます。

上記のような感じで、入力補完ができない入力を完成させることが出来ました。
（入力補完をさせたいとなっても出来ないので要注意）