【问题标题】:Disable Android browser's input overlays?禁用 Android 浏览器的输入覆盖?
【发布时间】:2012-03-14 10:50:23
【问题描述】:

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

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

更新:

以下是 Android 模拟器中的示例:

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

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

相关问题:

Input has different style on focus

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

【问题讨论】:

  • 您可以发布一个带有示例的屏幕截图吗?无法想象发生了什么。
  • @Mannaz:我已经更新了问题,感谢您的关注。
  • 这在以后的版本中更加明显,特别是 4.0.3。文本字段随机浮动。关注。
  • @Chris,你在 CSS 中使用 translate3d 吗?您可以尝试此博客中的解决方案:java-cerise.blogspot.co.nz/2011/10/…。如果这不起作用,我还在其他地方读到您可能必须将 translate3d(0,0,0) 添加到每个单独的输入。我认为这只能解决定位问题。

标签: android html css jquery-mobile android-browser


【解决方案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

【讨论】:

  • 老兄!你是个奇迹!
【解决方案2】:

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

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

【讨论】:

  • 使用-webkit-user-modify: read-write-plaintext-only;我有一些问题。我无法在漂亮的 inout 字段中输入内容。
【解决方案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,显示输入 type="search"。这是一个列表视图搜索过滤器,我去掉了大多数 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 放在后面。

【讨论】:

  • 我没有使用您提到的有问题的样式。 Android 愉快地忽略了我正在应用的 input:focus 样式。我很确定这是因为它实际上将 另一个输入 覆盖在我的焦点输入之上。我想摆脱这种重叠的输入,或者想办法设置它的样式。
  • 不确定这是否可行。这就是我开始解决方法的原因。还是让我们看看还会发生什么。
  • 有点困惑;当您说“注释掉这些”时,您是从哪里注释掉它们的?这些是标准的 JQuery Mobile 样式吗?
  • @AndrewFerrier - 不。不记得我从哪里得到这些 CSS,但底线是:如果你希望你的输入(尤其是选择)在 Android 上工作,请尝试没有它们。同样在未来,请在此处查看移动操作系统错误 (github.com/scottjehl/Device-Bugs) 以及如何解决它们。
【解决方案4】:

这是我的代码:

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

【讨论】:

  • Tnx!在 android 4.0.4 上使用 iscroll 5 解决滚动问题
  • 相关问题:失去焦点后如何将光标设置到输入字段的末尾?
【解决方案5】:

我只是在这里猜测,你可能已经尝试过了,但是

-webkit-appearance: none;

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

【讨论】:

  • 还是给你白盒
  • jQuery Mobile 已经应用了该样式,所以它没有帮助。
  • 假设在 iPhone 上修复某些东西会在 Android 上修复某些东西是错误的假设。相信我:)。
  • 不过,就像我说的:值得一试;)
  • 然后尝试更具体地选择您的输入。 input:not([type="checkbox"]):not([type="radio"]) 怎么样
【解决方案6】:
-webkit-user-modify: read-write-plaintext-only;

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

这在 Android 4.0 中可以正常工作,但是当您将此代码用于数字输入字段时,不支持 read-write-plaintext-only 的 bcoz,我遇到了这个问题,请任何人建议。

【讨论】:

    【解决方案7】:

    @czuendorf,5 月 13 日 13:53: 也为我工作(也是 Android 4.0)。

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

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

    【讨论】:

      【解决方案8】:

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

      【讨论】:

        猜你喜欢
        • 2017-01-23
        • 1970-01-01
        • 2013-02-10
        • 2018-08-09
        • 1970-01-01
        • 1970-01-01
        • 2016-05-25
        • 2011-08-19
        • 1970-01-01
        相关资源
        最近更新 更多