iphone 软键盘弹起,禁止页面整体往上滚动
时间: 2024-03-02 18:53:36 浏览: 116
仿iphone软键盘输入文本框.zip
可以使用 JavaScript 监听软键盘的弹出事件,然后禁止整体页面往上滚动。实现代码如下:
```javascript
// 监听软键盘弹出事件
window.addEventListener('resize', function() {
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
// 禁止页面往上滚动
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
});
```
这段代码会在页面加载后,监听 `resize` 事件。当软键盘弹出时,首先判断当前焦点元素是否为 `input` 或 `textarea`,如果是,则禁止页面往上滚动,保证输入框可见。
阅读全文