vue 解决文本框被键盘遮住的问题


Posted in Javascript onNovember 06, 2019

如下所示:

vue 解决文本框被键盘遮住的问题

vue 解决文本框被键盘遮住的问题

我把它写成了组件

主要代码是

document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight

我这边把div满屏了看下面css就知道了

你也可以使用body,这个你行百度一下就可以了

注意点是css

/* 页面满屏 */
.pageFullScreen {
 height: 100%;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: auto;
}

父组件

<style>
</style>
<template>
 <div id="testFullScreenId" class="pageFullScreen">
  <div style="height: 500px; background-color: #eee;overflow-y: scroll;-webkit-overflow-scrolling: touch;"></div>
   <inputList type="test" @inputListClick="inputListClick" FullScreenId="testFullScreenId" v-model="inputVal" @inputListFocus="focus" @inputListBlur="blur"></inputList>
   <br />
   <button @click="sub">获取input值</button>
   <br />
   <inputList type="test" @inputListClick="inputListClick" FullScreenId="testFullScreenId" v-model="inputVal" @inputListFocus="focus" @inputListBlur="blur"></inputList>
 </div>
</template>
<script>
 import inputList from '../../components/input' // input
 export default {
  components: {
   inputList
  },
  data() {
   return {
    imagesUrl: { // 排版图片使用懒加载
    },
    inputVal: ''
   }
  },
  created() {
  },
  mounted() {
  },
  methods: {
   focus(e) {
    console.log(e)
   },
   blur(e) {
    console.log(e)
   },
   inputListClick(e) {
    console.log(e)
   },
   sub() {
    alert(this.inputVal)
    console.log(this.inputVal)
   }
  }
 }
</script>

子组件

<style>
.inputList {}
</style>
<template>
 <!-- 父组件使用v-model发送input事件就可以接收到了 -->
 <div class="inputList">
  <input :type="type" @click="inputListClick($event)" @input="inputListInput($event)" @focus="inputListFocus($event)" @blur="inputListBlur($event)">
 </div>
</template>
<script>
 export default {
  name: 'inputList',
  props: {
   type: { // 文本框类型
    type: String,
    default: 'text'
   },
   FullScreenId: { // 文本框被键盘遮住
    type: String,
    default: ''
   }
  },
  data() {
   return {
    imagesUrl: { // 排版图片使用懒加载
    },
    pageHeightOne: '', // 页面高度
    pageHeightTow: ''
   }
  },
  created() {
  },
  mounted() {
   // window.onresize监听页面高度的变化
   window.onresize = () => {
    return (() => {
     // window.scroll(0, 0) // 滚到顶部
     document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight
    })()
   }
  },
  methods: {
   // 键盘输入
   inputListInput(e) {
    if (typeof e.target.value === 'string') {
     if (/[\u4e00-\u9fa5]/.test(e.target.value)) {
      e.target.value = ''
     } else {
      // console.log('合格')
     }
    } else {
     console.log('数据类型不正确')
    }
    this.$emit('input', e.target.value)
   },
   // 获取焦点
   inputListFocus(e) {
    // console.log(e)
    this.$emit('inputListFocus', 'focus')
   },
   // 失去焦点
   inputListBlur(e) {
    // console.log(e)
    this.$emit('inputListBlur', 'blur')
   },
   // 点击
   inputListClick(e) {
    this.$emit('inputListClick', 'click')
   }
  }
 }
</script>
Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
webpack4简单入门实例
Sep 06 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
vue点击页面空白处实现保存功能
Nov 06 #Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
vue 自定义右键样式的实例代码
Nov 06 #Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 #Javascript
vue 解决computed修改data数据的问题
Nov 06 #Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
You might like
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
jupyter实现重新加载模块
2020/04/16 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
2014年公务员个人工作总结
2014/11/22 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
如何用python识别滑块验证码中的缺口
2021/04/01 Python
如何正确理解python装饰器
2021/06/15 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
nginx lua 操作 mysql
2022/05/15 Servers