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

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

tigon6年前 (2020-07-31)javascript3849

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://webge.net/?id=92

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

this指向

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px 'Helvetica Neue'; color: #000000}es5 中 this指向该函数被调用的对象es6 中箭头函数的this指向是定义时的对象...

数组有哪些原生方法

赋值方法:pop 和 push   pop // 删除数组最后一个元素,返回被删除的元素push // 在数组尾部插入1-N个元素,返回操作后数组的lengthshift     //  删除数组第一个元素,返回被删除的元素uns...

event-loop

event-loop

如果知道js运行机制,在工作中会帮助我们更好的理解和编写代码,也知道为什么js是单线程js为什么是单线程原因,就是为了避免DOM渲染的冲突异步是一种“无奈”的解决方案,虽然有很多问题,如下:1,没按照书写方式执行,可读性差2,callback中不容易模块化什么是event-loop1,同步代码,直接...

最全的js运行机制

最全的js运行机制

主线程Event Queue:(微任务,宏任务) 1,主线程执行完后2,到Event Queue里找,先执行微任务,再宏任务...

js 深浅拷贝

对象浅拷贝Object.assign,也可以做到浅拷 slice let obj=[11,22,33,44,['aa','bb','cc']] let aaa=obj.slice(0); aaa[4][0]='ccc' c...

js 判断数组,对象

arr=[1,2,3,4]; obj={a:'aaa'}; console.log(arr.constructor===Object) //false arr instanceof Array //true Object.prototype.toString.call(...