vue表单项目解决安卓键盘遮挡输入框问题
一、思路
设计动态class,当输入框onfocus状态触发事件激活class,并且滚动到页面底部,当输入框onblur状态关闭class
<style>
.center-box-input-position {margin-top: 0px;}
</style>
<div class="center-box":class="{'center-box-input-position':customerMessageState}">
</div>
<script>
export default {
data () {return {customerMessageState: false,
}
}
methods:{
blurCustomerMessage () {let u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {this.customerMessageState = false;}},focusCustomerMessage () {let u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {this.customerMessageState = true;this.$nextTick(() => {setTimeout(() => {window.scroll({ top: document.body.clientHeight, left: 0, behavior: 'smooth' });}, 50);});}},
}
vue表单项目解决安卓键盘遮挡输入框问题相关推荐
- 安卓webview中键盘遮挡输入框如何解决
关键词:安卓原生.unity.webview.键盘遮挡输入框.沉浸式状态栏. 首先是最简单的情况,当我们app有一个比较靠下的输入框时,唤出键盘会遮挡住输入框. 这种情况的对应方式很简单,只需要找到安 ...
- Vue.js-Day02-AM【Vue表单、核心指令(单选框、密码框、多行文本框、单选、多选、勾选、下拉列表)、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.Vue表单 原生JS实现异步表单提交 运行截图 代码 核心指令 单选框.密码框.多行文本框 单选 多选 勾 ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- 开源Vue表单设计器
一.项目简介 Vue表单设计器,开源 二.实现功能 支持文本(单行文本.多行文本) 支持时间选择器 支持单选和多选 支持下拉选择框 支持单行文本.支持多行文本 支持格栅布局,支持滑块 支持图片.支持自 ...
- 多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
- Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
- vue表单验证,多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现 这里以antd 举例 <template><a-form-model ref="rule ...
- Vue 表单验证、数据验证
graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (: 使用说明 1 将 graceChecker.js 部署到您的项 ...
- ant-design vue 表单使用v-decorator后点击label 输入框聚焦问题解决方案
ant-design vue 表单使用v-decorator后点击label 输入框聚焦问题解决方案 最近项目有个需求如下图: 表单筛选 一般是label + 输入框,这个是label是个下拉框,必有 ...
最新文章
- php 去重_php求两数组交集的四种方法详解
- SVN 图标和工具、wc.db学习
- linux环境变量与文件查找
- 新手Java程序员找工作更看重Java项目经验?
- 面试题:1 到 1000 之间有多少个 7?
- LeetCode:二叉树相关应用
- VS Tools for AI全攻略(2)低配置虚拟机也能玩转深度学习,无需NC/NV系列
- java学习(94):cpu随机调用线程测试
- Java hdfs连接池_Java使用连接池管理Hdfs连接
- 项目私活 【抢小米手机软件】可以做的朋友,可以联系社区
- python - unitest
- about x86 protected mode
- vue向ifarm传值_vue组件间传值
- 信息安全问题频发:四成人讨厌大数据 六成人称微信谣言最多
- 手把手会教你搭建微信小程序服务器node!!!
- 【零基础学Python】Day9 Python推导式
- 为什么要进行傅立叶变换?傅立叶变换究竟有何意义?如何用Matlab实现快速傅立叶变换
- sqlite入门基础(一):sqlite3_open,sqlite3_exec,slite3_close
- 深度了解自监督学习,就看这篇解读 !何恺明新作MAE:通向CV大模型
- 某电子订单系统升级步骤