android h5页中嵌套弹框,h5页面嵌套在安卓或IOS中的坑

h5页面嵌套在安卓或IOS中的坑

最近由于原生app开发太忙，整个商户一块用h5页面来做，之后嵌套在app里面，在这个过程中，碰到一些之前没有遇到的坑，做个记录，下次防坑。 1、弹出模态框，底部内容禁止滑动。

一开始想到的就是点击按钮，模态框出现时，给body内容加上overflow：hidden，在谷歌模拟器上这样是没有问题的，但是真机测试中不行，需要在当前模态框中加入

$('模态框').on('touchmove', function(e) {

e.preventDefault();

}); 2、出现模态框时候，点击别的空白区域，模态框消失

应用场景：当点击页面右上角更多时候，出现一个模态框里面有举报，收藏等操作，点击没有内容区域时候就需要隐藏这个框。

处理方法：$('模态框').on('click',function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

if($(target).hasClass('shelter')){

$(target).fadeOut(200);

}

})

利用的就是事件委托原理，判断目标元素是直属的模态框就隐藏，否则显示(点击模态框空白处隐藏) 3、ios或Android中 页面的点击事件会有一个灰色的层出现

应用场景：由于没有用tap这些移动端专有的事件，移动端的a链接跳转或者元素的click事件会有灰色背景

处理方法：需要用的的标签{

background-color:transparent;

-webkit-tap-highlight-color:rgba(255,255,255,0)

} 4、修改input 的 placeholder的颜色

应用场景：这个问题比较老生常谈，在移动端遇到的很多，input的提示文字要浅点，输入的文字较深

处理方法：input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

color:#ccc ;

}

input:-moz-placeholder, textarea:-moz-placeholder {

color:#ccc  ；

}

input::-moz-placeholder, textarea::-moz-placeholder {

color:#ccc ;

}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {

color:#ccc  ;

} 5、可输入的div

应用场景：在表单页面，需要输入文字很多的文本框，input不能换行，textarea虽然可以，但是它的高度不能随文本增加而增高(当然js可以实现)，但是可以CSS实现的就不需要js了

处理方法：给div增加 contenteditable="true" 属性，但无法去除从网页粘贴过来内容的格式，用contenteditable="plaintext-only"，既可以只粘贴文字了,需要注意的是，在ios中，需要给当前元素加-webkit-user-select:text；属性，否则，会弹出软键盘，但是输入不了文字。

效果预览

div{

width:300px;

border:1pxsolid#666;

font-size:20px;

color:blue;

line-height:40px;

outline:none;

padding:10px;

}

div:empty:before{

content:attr(placeholder);

color:#ccc;

}

div:focus:before{

content:none;

}