2025-04-14

h5中一些问题及处理方法

# 1、ios 端兼容 input 光标高度

问题详情描述：input 输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样高（即光标非常高）

/* 解决办法：高度height和行高line-height内容用padding撑开  */
.content {
  float: left;
  box-sizing: border-box;
  height: 88px;
  width: calc(100% - 240px);
  .content-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: #333333;
    font-size: 28px;
    //line-height: 88px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

# 2、ios 键盘唤起，键盘收起以后页面不归位

问题详情描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
出现原因分析：固定定位的元素在元素内 input 框聚焦的时候弹出的软键盘占位失去焦点的时候软键盘消失但是还是占位的导致 input 框不能再次输入在失去焦点的时候给一个事件

<div class="list-warp">
  <div class="title"><span>投·被保险人姓名</span></div>
   <div class="content">
     <input class="content-input"
            placeholder="请输入姓名"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    </div>
 </div>

 changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    }

# 3、安卓弹出的键盘遮盖文本框

解决办法：给 input 和 textarea 标签添加 focus 事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout 延时 0.5 秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

    changefocus(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      if(isAndroid){
        setTimeout(function() {
         document.activeElement.scrollIntoViewIfNeeded();
         document.activeElement.scrollIntoView();
        }, 500);
      }
    }

# 4、Vue 中路由使用 hash 模式，开发微信 H5 页面分享时在安卓上设置分享成功，但是 ios 的分享异常

出现原因分析： jssdk 是后端进行签署，前端校验，但是有时跨域，ios 是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取 url 并不能获取后面这些参数
解决办法：页面$router.push 跳转，改为 window.location.href 去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功（适合分享的页面不多的情况下，作为一个单单页运用，这样刷新页面跳转，还是..）

# 5、 IOS 键盘字母输入,默认首字母大写的解决方案

<input autocapitalize="off " autocorrect="off " />
//input的三个属性autocomplete:默认为on,
// 代表是否让浏览器自动记录输入的值,
// 可以在input中加入autocomplete="off "来关闭记录,保密输入内容;autocapitalize:自动大小写;autocorrect:纠错

# 6、input 的 placeholder 文本位置偏上的情况

设置css line-height:normal;

# 7、transition 清除闪屏

-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D
-webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏
-webkit-perspective: 1000;

# 8、浏览器后退不刷新

window.onpageshow = function(evt){
  if(evt.persisted){
    document.body.style.display ="none "
    location.reload()
  }
}

# 9、防止长按页面元素被选中

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器
-khtml-user-select:none; //早期浏览器
-moz-user-select:none; //火狐
-ms-user-select:none; //IE10
user-select:none;

上次更新: 2025-12-04