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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
javascript不可用的问题探究
Oct 01 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python双向链表实现实例代码
2013/11/21 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
python中有帮助函数吗
2020/06/19 Python
韩语专业本科生求职信
2013/10/01 职场文书
司机工作自我鉴定
2014/09/19 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
Python之基础函数案例详解
2021/08/30 Python
java如何实现socket连接方法封装
2021/09/25 Java/Android
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers