web-dev-qa-db-ja.com

IOS HTMLフォーム入力でのデバイスの問題（タイプ=テキスト）

だから私は2つのフィールドを持つ電子メールとパスワードのHTMLログインフォームを持っています。これらは、IOS devices（iPhone、iPad）以外のデバイスのブラウザーで簡単に入力できます。OnIOSフィールドはほとんどフォーカスできず、一度フォーカスすると、キーボードがポップアップし、入力を開始しますが、実際には何も入力されていません。Chromeとsafariの両方で試しても、同じ結果が得られます。フィールドは黒のままです。 ：

<form method="post" name="login" action="login">
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="email"></label>
      <input type="text" name="email" placeholder="Enter your email address" class="formInput"/>
   </div>
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="password"></label>
      <input type="password" name="password" class="formInput"/>
    </div>
    <button class="blue centeredContent">Login</button>
</form>

オートフォーカス属性を追加して、値を事前に設定してみましたが、それでも同じです。

htmliosiphoneformsinput
16
webicy

この問題は、ユーザーが要素をタッチ/ホールドしたときにタッチデバイスの動作を支援するためにオンラインで見つけたスタイルシートのリセットであり、ほとんどのプロジェクトでコピーしました。したがって、この問題がある場合は、CSSに次の行が含まれている可能性があります。

  *, *:before, *:after {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
     }

削除するか、デフォルトに設定してください。そして、もしあなたの意図があなたのウェブサイト上の人々の選択を止めることであるなら、inputsでこのスタイルプロパティをデフォルトにリセットすることを確認してください

  input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     }
53
webicy

私の場合、問題はアンギュラーマテリアルパッケージ、バージョン1.1.2にありました。アップデート（1.1.18）後、すべてが期待どおりに機能します。

0
plascode