Стили телефонной таблицы -webkit-user-select: none; отключение текстового поля

Я новичок в Phonegap. У меня проблема, когда по умолчанию css, используемый в чистом проекте Phonegap, не позволит вводить текстовые поля. Я сузил его до одной строки CSS:

* {
            -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: Пользовательский выбор: ни один не приводит к тому, что поле ввода недоступно в Safari Хотя немного отличается.

Мое текущее решение таково:

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

Просто по-прежнему интересно узнать, что является самым элегантным решением для ввода текста, но при этом сохранить некоторые из этих копий и прошлых функций, которые пытается выполнить Phonegap. Спасибо!

Ответ 1

Попробуйте добавить это в свой css:

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

Это приведет к переопределению отключения текста, которое вы установили для каждого элемента (через селектор *) для полей ввода.

Ответ 2

Просто добавьте правила в css таким образом:

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

Ответ 3

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;  
  }