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

Ответ 1

Наконец, я решил эту проблему для устройств 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

Ответ 2

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

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

Ответ 3

Не уверен, что это рабочее решение и ответ, но мои входы начали играть на 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;  
    }

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

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

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

Ответ 4

Вот мой код:

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

Ответ 5

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

-webkit-appearance: none;

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

Ответ 6

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

-webkit-тук-изюминкой цвет: RGBA (0,0,0,0); outline-style: none;

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

Ответ 7

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

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

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

Ответ 8

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