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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
JS实现百度搜索框
Feb 25 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
PHP开发文件系统实例讲解
2006/10/09 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP精确计算功能示例
2016/11/29 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python实现FLV视频拼接功能
2020/01/21 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
高中化学教学反思
2014/01/13 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
亮剑精神观后感
2015/06/05 职场文书