当前位置:首页 > javascript > 正文内容

IOS软键盘收起留白问题及Input光标过长问题

tigon5年前 (2020-07-31)javascript3279

1.Input光标过长问题
iso 中input 光标长度与line-height有关,input本身字体就是上下居中的因此不需要设置,但如果想控制光标的长度可以通过设置line-height高度来控制;

2.IOS软键盘收起留白

1.可以通过输入框失去焦点

<div class="input flex1 aic flex pl20 pr20">
    <input v-model="msgContent" type="text" placeholder="说点什么吧" @blur="onBlur">
 </div>
 //输入框失焦后回到页面首部 IOS12,微信6.7.4有这个问题
      onBlur () {
        if (isBrower('iphone')) {
          window.scrollTo(0,0)
        }
        window.scrollTo(0,0)
      }

如果来多个输入框则会出新下去上来反复的问题

通过监听窗口大小的变化来实现

window.addEventListener('resize', function() {
  if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

这个方法在微信里面不支持,监听不到;

3.通过全局监听失去焦点 ,并使用变量延迟进行处理

var flage = false
window.addEventListener('focusin', function() {
  flage = false
})
window.addEventListener('focusout', function() {
  flage = true
  setTimeout(function(){
    if(flage){
      window.scrollTo(0, 0)
    }
  })
})

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://www.webge.net/?id=92

“IOS软键盘收起留白问题及Input光标过长问题” 的相关文章

this各种指向

1,由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即this的指向是可变的。2,只要函数被赋给另一个变量,this的指向就会变。var A = {       name: ...

代理事件绑定

代理事件绑定

 代理绑定事件通用绑定事件的函数...

js类型转换

js类型转换

数据类型: 原始类型:        Boolean Null Undefined Number String Symbol     显示类型转换: ...

js原型链

js原型链

创建对象有几种方法:原型,构造函数,实例,原型链左边 实例对象  instanceof 构造函数  来判断是不是同一个引用原型用constructor 比instanceof来判断继承更严谨var o3=new M()o3 instanceof  M  &nb...

js 面向对象类

js 面向对象类

类与实例:    类的声明    生成实例类与继承    如何实现继承    继承的几种方式原型链实现继承new child2.__prot...