H5混合开发中android终端和ios终端常见的兼容问题2

转自 https://www.cnblogs.com/stoneniqiu/p/6077112.html

1.ios键盘挡住输入框。

setInterval(function () { 
　　if (document.activeElement.className.indexOf('inputcontent') >= 0) {
　　　　document.activeElement.scrollIntoViewIfNeeded();
　　}

}, 300);

inputcontent为输入框的样式。activeElement表示获得焦点的元素。但是这个方法只在app中有用，如果是在浏览器中还是会失效。

2.确保弹出来的是数字键盘

<input type="number" pattern="[0-9]*" />

<input type="password" pattern="[0-9]*" />

只有number或者tel还是不够，只有加入正则，ios才会出现九宫格。

3. fastClick 锁住输入框

在ios中，会出现几秒的输入框没有反应，开始也怎么想不明白，各种尝试，推测，搜索发现原来是使用的轻框架中用到了fastClik引起的，解决的办法就是加上一个样式。

<div id="content" class="inputcontent needsclick" ></div>

如果不加这个，不单会锁住输入框，每次调用focus都会设置光标跑在最前面，无法移动到后面。

4.模拟placeholder

div作为输入框，本身加入placeholder是无效的。得借助于伪元素。

<div id="content" class="inputcontent needsclick" placeholder="有问题就尽管提问吧" contenteditable="true"></div>

.tools .inputcontent:after {

    display: inline-block;

    width: 100%;

    color: #999;

    content: attr(placeholder);

}

然后在获得焦点和失去焦点的时候对这个属性进行移除和添加操作。这样做的好处在于，分离用户输入的内容，如果把placeholder的值直接在写输入框中这样会多一些判断，让代码不太干净。

5.快速滚动和回弹的效果

要实现这个效果很简单，只需要加一行css代码即可，单独对body设置-webkit-overflow-scrolling touch是无效的，需要针对html和body同时设置才有效果：

html,body{

    height: 100%;

    overflow: auto;

   -webkit-overflow-scrolling: touch;

}

问题参考：https://blog.csdn.net/eadio/article/details/78520412

巴特西