web-dev-qa-db-ja.com

Phonegapスタイル-webkit-user-select：なし;テキストフィールドを無効にする

Phonegapは初めてです。クリーンなPhonegapプロジェクトで使用されるデフォルトのcssでは、テキストフィールドへの入力が許可されないという問題があります。 CSSの1行に絞り込みました。

* {
            -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
            -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
            -webkit-user-select: none;                 /* prevent copy paste, to allow, change 'none' to 'text' */

    }

問題の行は次のとおりです。

-webkit-user-select: none;

これはwww/index.cssにあります。

入力フィールドを完全に無効にすることは、望ましい効果ではないようです。

また、この問題を2回投稿しましたが、クローズされました。理由はわかりません...一般的な問題ではないため、私の問題はクローズされました。それについて言えることは、stackoverflowの一部のユーザーは、CSS 3、Phonegap、HTML 5、および-webkit-user-select：が一般的な状況だとは思わないということです。私は違うようにお願いします。

ただし、Safariで問題を引き起こすこの問題もここに掲載されています。 ユーザーselect：noneは、Safariで入力フィールドにアクセスできません わずかに異なりますが。

私の現在の解決策はこれです：

-webkit-user-select: text; /* change 'none' to 'text' */

テキスト入力を可能にする最もエレガントなソリューションについてはまだ興味がありますが、このコピーとPhonegapが達成しようとしている過去の機能の一部を維持しています。ありがとう！

htmlcsscordova
35
botbot

これをcssに追加してみてください：

input {
    -webkit-user-select: auto !important;
}

これにより、入力フィールドのすべての要素に（*セレクターを介して）設定したテキスト選択の無効化がオーバーライドされます。

41
Scott Thiessen

この方法でcssにルールを追加するだけです：

*:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
25
Anton Taranovskyi

user-selectは、contenteditable = "true"の要素で問題を引き起こす可能性があるため、追加することをお勧めします

  [contenteditable="true"] , input, textarea {
        -webkit-user-select: auto !important;
        -khtml-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        -o-user-select: auto !important;
        user-select: auto !important;  
  }
5
Sarath