正常に動作しているはずの 300 ミリ秒の遅延が発生しているハイブリッド Angular アプリがあります (正しいメタ タグが設定されているため)。
FastClickライブラリを使用してこの問題を回避しようとしましたが、iOS の Safari と Android の Firefox で機能しました。しかし、Android の Chrome でも同じ問題が発生します。
Angular ngTouchモジュールを組み込むことでFastClick を置き換えようとしたところ、Chrome での問題のほとんどが解決されました。
ただし、何らかの理由で、すべての入力フィールドが機能しなくなりました。フィールドの CSS が変更されるため、それらをタッチすると認識されますが、データを入力することはできません。入力を長押しすると入力フィールド内にカーソルが表示されますが、モバイル デバイスではキーボードが表示されません。フォームの送信ボタンも機能しなくなりました。
この問題は、モバイル デバイスだけでなく、Chrome 開発ツールを使用してローカルでデバッグする場合にも発生します。
Angular と Angular-touch の両方のバージョン 1.3.15 を使用しています。
使用するログイン フォームの例を次に示します。
<form name="login_form" class="form" shake submitted="submitted" ng-submit="login(login_form.$valid)" novalidate autocapitalize="none">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="username" required />
<label placeholder="{{'site.userName' | translate}}"></label>
<div ng-show="(login_form.name.$invalid && login_form.name.$dirty) || (login_form.name.$pristine && submitted)" class="required">
<span>{{'login.usernameRequired' | translate}}</span>
</div>
<!--<hr class="form-group-separator">-->
<input type="password" name="password" class="form-control last-visible-form-control" ng-model="credentials.password" required />
<label class="responsive" placeholder="{{'site.password' | translate}}"></label>
<div ng-show="(login_form.password.$invalid && login_form.password.$dirty) || (login_form.password.$pristine && submitted)" class="required">
<span>{{'login.passwordRequired' | translate}}</span>
</div>
<ul>
<li>
<label>{{'site.stayLoggedIn' | translate}}</label>
<span class="value">
<span class="form-check"
ng-class="{'checked':credentials.save}"
ng-model="credentials.save"
ng-click="toggleStayLoggedIn()"></span>
</span>
</li>
</ul>
</div>
<div class="form-group">
<!--<button type="submit"></button>-->
<button type="submit" class="cta green">
{{'site.login' | translate}}
<span data-svg-icon icon="circle-right-arrow"></span>
</button>
</div>
</form>