android - 禁用 Android 浏览器的输入覆盖？

Question

我有一个带有一些文本输入的网页。Android 浏览器（至少在我现在所拥有的 Android 2.3.4 上）似乎覆盖了它自己对焦点页面上的输入的控制。

问题是覆盖的控件是一个白色的矩形，看起来很丑。有没有办法禁用它，或者以某种方式设置它？

更新：

以下是来自 Android 模拟器的示例：

圆角和背景丢失。在实际设备上，我什至看不到控件周围的边框。

我可能应该提到我正在使用 jQuery Mobile。我的测试设备是 HTC Evo 4G。

相关问题：

输入在焦点上有不同的风格

如果在 HTC 设备上突出显示，WebViews 中的输入元素始终具有相同的样式

Answer 1

最后，我为 Android 2.3 设备解决了这个问题。

无法真正移除叠加层，但可以将叠加层移到视口之外。

叠加层尝试将自身定位到与输入字段相同的位置。它复制您分配的宽度和位置偏移量

position:relative

和

top:-10000px

但是覆盖不会复制通过分配的位置偏移量

-webkit-transform: translate3d()

这会导致 iScroll 等 JS 库出现一些问题。

但这也有助于我们隐藏叠加层：

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

Answer 2

以下代码将删除点击突出显示 - [Android 4.0.3]

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

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

在注释掉第一个 webkits 之后，Android 对我来说工作正常。不过，我也覆盖了很多其他的东西。

另请查看下面的屏幕截图：

我对输入所做的是创建一个列表视图，将所有输入放入列表项并剥离所有输入-JQM-CSS。这应该为您提供位于列表视图项目顶部的透明输入，我认为这看起来非常好。您还可以向输入添加标签，我的示例设置为使用 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 放在后面。

Answer 4

这是我的代码：

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

Answer 5

我只是在这里猜测一下，您可能已经尝试过了，但是

-webkit-appearance: none;

可能会成功。我什至没有安卓设备，但在 iphone 上解决了大多数与输入相关的样式问题，因为它完全去除了默认浏览器应用的样式。无论如何都值得一试！

Answer 6

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

-webkit-tap-highlight-color:rgba(0,0,0,0); 大纲样式：无；

这将在 Android 4.0 中正常工作，但是当您将此代码用于数字输入字段时，不支持仅读写纯文本的 bcoz，我遇到了这个问题，请任何人提出建议。

Answer 7

我确认 czuendorf 补丁的 macnerd 分析。这些行为从一个 android 版本到另一个版本差别很大。我在具有 android 4.0.3 的真实 Htc 设备上对其进行了测试，轮廓消失了（太棒了！），但它打开了一些严重的键盘问题（我看到该字段中没有显示单个按键，以及其他奇怪的行为......） . 在模拟器中没有出现键盘问题。我还没有找到任何适用于真实设备的解决方案。这是一个耻辱！

Answer 8

@czuendorf，5 月 13 日 13:53：也为我工作（也是 Android 4.0）。

但是...如果您使用 type="number" 的输入，那么当您输入该字段时，数字键盘将不再弹出，而是显示常规键盘。

如果您删除 -webkit-user-modify，则会再次显示右侧键盘，但输入元素在编辑时显示为带边框。在我的情况下，输入覆盖弄乱了布局（向下和向右移动了一些内容），但是这个新的 css 代码不再发生这种情况。