移动端键盘输入框把底部元素顶上去了_关于移动端input框相关问题

user-select:none 导致input无法输入的问题

今天解决了一个小小的bug，写响应式页面的时候，发现页面在手机端打开的时候input框无法聚焦光标，无法输入文字，绞尽脑汁 找了半天 才发现自己多加了一段代码。

-moz-user-select: none;-webkit-user-select: none;
           

把这行代码注视掉就可以了 至于这行代码作用是什么 解释如下

或许你常常不希望用户在你的网站上选择文本,无论是否是出于版权的原因.通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none.

请谨慎使用这个属性：因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效.如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容.搞不懂这个属性为什么会被webkit和gecko支持.

移动端H5输入键盘在focus事件时抬高输入框

这里在vue做简单的解决方案

input(v-model='mobile' ref='mobile' type='number' class='van-input mobile' placeholder='请输入手机号码' @blur='inputblur' @focus='inputfocus("mobile")')methods: { inputblur(e) { e.target.scrollIntoView(); }, }
           

输入框数据节流

数据节流函数

export function debounce(fn, delay) { let timer = null return function() { let context = this let args = arguments clearTimeout(timer) timer = setTimeout(function() { fn.apply(context, args) }, delay) }}
           

这里以mobile参数举例

created() { this.$watch('mobile', debounce(query => { console.log(query,'--------') }, 300)) },