Отключить входные наложения браузера Android?

У меня есть веб-страница с некоторыми текстовыми вводами. Браузер Android (по крайней мере, на Android 2.3.4, который есть все, что у меня есть сейчас), похоже, накладывает собственный контроль над входными данными на странице в фокусе.

Проблема в том, что наложенный элемент управления представляет собой белый прямоугольник, и он выглядит уродливым. Есть ли способ отключить его или каким-то образом изменить его?

ОБНОВИТЬ:

Вот пример из эмулятора Android:

Введите описание изображения здесь

Закругленные углы и фон теряются. На самом устройстве я даже не вижу границы вокруг элемента управления.

Вероятно, я должен упомянуть, что я использую jQuery Mobile. Мое тестовое устройство – HTC Evo 4G.

Связанные вопросы:

Ввод имеет различный стиль фокусировки

Элементы ввода в WebViews всегда имеют тот же стиль, если они выделены на устройствах HTC

Solutions Collecting From Web of "Отключить входные наложения браузера Android?"

Наконец, я решил эту проблему для устройств Android 2.3.

Невозможно действительно удалить оверлей, но можно перемещать оверлей вне области просмотра.

Наложение пытается позиционировать себя в том же положении, что и поле ввода. Он копирует ширину и смещение позиции, которые вы назначаете с помощью

 position:relative 

а также

 top:-10000px 

Но наложение не копирует смещения позиции, которые назначаются через

 -webkit-transform: translate3d() 

Это вызывает ряд проблем с JS-библиотеками, такими как iScroll.

Но это также помогает нам скрыть наложение:

 input[type="password"], input[type="text"]{ position:relative; top:-10000px; -webkit-transform: translate3d(0, 10000px, 0); } 

Вы помещаете поле ввода вне окна просмотра. Надлежащее положение располагается рядом с ним. Теперь вы используете translate3d () для перемещения его в прежнее положение.

Мы используем это решение уже в нашей мобильной веб-среде «qooxdoo Mobile»: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

Следующий код удалит подсветку выделения – [Android 4.0.3]

 input{ -webkit-user-modify: read-write-plaintext-only; -webkit-tap-highlight-color:#3072af; } 

Не уверен, что это рабочее решение и ответ, но мои входы начали играть на Android после комментирования их, что все создало хаос на моих текстовых вводах Android (HTC2.3) и выбирает

 /* really bad */ -webkit-backface-visibility: hidden; /* your normal bad */ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); 

Если вы хотите стилизовать ввод по умолчанию, я использую следующие:

 /* native placeholder styling */ ::-webkit-input-placeholder { color:#555555; } :-moz-placeholder { color:#555555; } .inField label { color:#555555; cursor: text; } 

После комментирования первых веб-китов, Android работает нормально для меня. Тем не менее, я превосхожу много других вещей.

Также посмотрите скриншот ниже:

Что я сделал с моими входами, это создать список, поместить все мои входы в элементы списка и удалить все входные JQM-CSS. Это должно дать вам прозрачный ввод, сидящий поверх элемента списка, который, как мне кажется, выглядит очень хорошо. Вы также можете добавлять метки к входам, мой пример настроен для работы с плагином label inField, так что у вас уже есть все эти классы на борту.

Снимок экрана с моего Android HTC 2.3.5 и показывает тип ввода = «поиск». Это фильтр поиска списка, который я лишил большинство JQM-css. Я удалил его из списка вниз, поместил его в свой список форм, добавил ярлык (не могу видеть, активен ли он) и разделил все CSS, включая значки.

Вот пример того, как я делаю свои списки-формы:

  <ul data-role="listview" data-inset="true" class="inputList"> <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c"> <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text"> <label for="item">item</label> <input type="text" name="item" id="item" /> </div></div> </li> <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c"> <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text"> <label for="item2">item2</label> <input type="text" name="item2" id="item2" /> </div></div> </li> </ul> 

CSS:

 .inputList li div.ui-btn-inner { background: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .inputList label { margin: 3px 0 0 !important; } // styling of text inputs! .inputList input.ui-input-text, .inputList textarea.ui-input-text { width: 93%; margin-left: 1%; padding: 0.6em 0; text-indent: 80px; /* hard-coded - doesn't work on Android */ border-width: 0px; background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius:0px; -webkit-border-radius: 0px; border-radius: 0px; } .inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner { padding: 0px !important; } // labels, from inField label plugin, but not active .inField { position:relative } .inField label { line-height: 2.25em; vertical-align: middle; position:absolute; left:8pt; width: inherit !important; } направо .inputList li div.ui-btn-inner { background: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .inputList label { margin: 3px 0 0 !important; } // styling of text inputs! .inputList input.ui-input-text, .inputList textarea.ui-input-text { width: 93%; margin-left: 1%; padding: 0.6em 0; text-indent: 80px; /* hard-coded - doesn't work on Android */ border-width: 0px; background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius:0px; -webkit-border-radius: 0px; border-radius: 0px; } .inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner { padding: 0px !important; } // labels, from inField label plugin, but not active .inField { position:relative } .inField label { line-height: 2.25em; vertical-align: middle; position:absolute; left:8pt; width: inherit !important; } 

Надеюсь, это все CSS. Если вы пытаетесь установить это, и это выглядит крах, дайте мне знать.

Подобная работа выглядит очень хорошо на моем HTC 2.3.4. Мои CSS все еще нуждаются в полировке. Мне нужно уменьшить ширину входов и выровнять: центр, поэтому границы нижнего списка остаются видимыми.

Кроме того, это было бы хорошим решением для крахмальных входов Android. Просто разделите все JQM-CSS и поместите listview-li.

Вход в список поиска Android listview

Вот мой код:

 input { -webkit-user-modify: read-write-plaintext-only; -webkit-tap-highlight-color: rgba(255,255,255,0); } 

Я просто угадываю здесь, и вы, наверное, уже пробовали, но

 -webkit-appearance: none; 

Может сделать трюк. У меня даже нет устройства для Android, но на iphone, который разбирает большинство проблем, связанных со сложностями ввода, поскольку он полностью удаляет стандартный стиль браузера по умолчанию. В любом случае, стоит!

 -webkit-user-modify: read-write-plaintext-only; 

-webkit-тук-изюминка цвет: RGBA (0,0,0,0); Контурный стиль: нет;

Это отлично работает в Android 4.0, но когда вы используете этот код для числового поля ввода, не поддерживается bcoz для чтения-записи-plaintext-only, у меня есть эта проблема, пожалуйста, предложите кому-нибудь.

@czuendorf, 13 мая в 13:53: Работала и для меня (также Android 4.0).

Однако … если вы используете вход с типом = «число», тогда цифровая клавиатура больше не появляется, когда вы вводите поле, но вместо этого отображается обычная клавиатура.

Если вы удаляете -webkit-user-modify, то правая клавиатура отображается снова, но элемент ввода отображается с рамкой во время редактирования. В моем случае входной оверлей испортил макет (перемещал некоторый контент вниз и вправо), но этого больше не происходит с этим новым кодом css.

Я подтверждаю анализ macnerd патча czuendorf. Такое поведение сильно варьируется от одной версии для Android до другой. Я протестировал его на реальном устройстве Htc с Android 4.0.3, и контур исчез (отлично!), Но он открывает некоторые серьезные проблемы с клавиатурой (я вижу, что одно нажатие не отображается в поле и другие странные поведения …) , В эмуляторе проблема с клавиатурой не возникает. Я не нашел решения для реального устройства. Это позор!