2

正常に動作しているはずの 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>
4

0 に答える 0