Open hanyuxinting opened 5 years ago
[某些技巧](https://www.jianshu.com/p/bc5a5387f056)
H5上达到原生的滚动效果
处理方法, 对需要滚动的组件使用CSS属性
.scrollPart {
-webkit-overflow-scrolling: touch;
}
当虚拟键盘弹出的时候,window的resize事件会被触发。 监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。
var inputs = document.getElementsByTagName("input"); for (var i = 0; i< inputs.length; i++) { inputs[i].onclick = function (e) { window.setTimeout(function () { e.target.scrollIntoViewIfNeeded(); }, 0); } }
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded(); }, 0); } }) }
是输入法根据表单元素自己做的识别。你把你的input type 设为 search,就可以了。 然后在css上设置 -webkit-appearance: none; 去除搜索输入框特有的样式。
[某些技巧](https://www.jianshu.com/p/bc5a5387f056)
H5上达到原生的滚动效果
处理方法, 对需要滚动的组件使用CSS属性
.scrollPart {
}
当虚拟键盘弹出的时候,window的resize事件会被触发。 监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。
h5设置键盘为搜索类型
是输入法根据表单元素自己做的识别。你把你的input type 设为 search,就可以了。 然后在css上设置 -webkit-appearance: none; 去除搜索输入框特有的样式。