微信浏览器中Input的兼容性处理

简介: 微信浏览器中Input的兼容性处理

正文


  1. 在 iOS 上输入框默认样式会有内阴影,无法通过 box-shadow: none 去除,可通过以下方式处理。

input {
  -webkit-appearance: none;
}


  1. 在微信浏览器中部分 iOS 设备在输入框失焦时,页面无法正常回弹,可通过在 input 失焦事件加上:

function blurHandler() {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
  }, 0)
}


目录
相关文章
|
8月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
1681 1
|
8月前
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
188 3
|
8月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
小程序
【组件】微信小程序input搜索框的实现
【组件】微信小程序input搜索框的实现
253 0
|
Web App开发 前端开发 JavaScript
跨浏览器兼容性:确保您的网站在各个平台上无缝运行
在当今多样化的网络浏览器市场中,确保您的网站能够在不同浏览器上正常运行变得至关重要。跨浏览器兼容性是一项关键任务,涉及到确保您的网站在不同浏览器和设备上都提供一致的用户体验。本博客将深入探讨跨浏览器兼容性的重要性、挑战以及如何实施有效的兼容性策略。
229 0
|
2月前
如何在不同的浏览器环境中确保时间戳转换的兼容性?
通过以上这些措施,可以在不同的浏览器环境中提高时间戳转换的兼容性,确保应用能够在各种浏览器中稳定运行,为用户提供良好的体验。
|
3月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
61 1
 H5微信外支付(移动端浏览器)
|
3月前
|
Web App开发 前端开发 JavaScript
|
3月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
81 1
|
5月前
|
XML 小程序 JavaScript