android - 如何关闭屏幕叠加层oppo - 屏幕叠加层zte




禁用Android浏览器的输入叠加层? (6)

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

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

更新:

以下是Android模拟器的示例:

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

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

相关问题:

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

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


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

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

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


不确定这是一个有效的解决方案和答案,但我的输入在评论出这些后开始在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。 这应该给你一个透明的输入坐在listview项目的顶部,我认为这看起来非常好。 您还可以为输入添加标签,我的示例设置为使用inField标签插件,因此您已经拥有了所有这些类。

屏幕截图来自我的Android HTC 2.3.5并显示输入类型=“搜索”。 这是一个listview搜索过滤器,我删除了大多数JQM-css。 我已将它从listview中删除,将其放入我的表单列表中,添加了一个标签(无法查看是否处于活动状态)并剥离所有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放在后面。


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

-webkit-appearance: none;

可以做到这一点。 我甚至没有Android设备,但在iphone上排除了大多数与输入相关的样式问题,因为它完全消除了默认浏览器应用的样式。 无论如何值得一试!


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


这是我的代码:

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

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

-webkit抽头高亮颜色:RGBA(0,0,0,0); outline-style:none;

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







android-browser