关于input的一些问题解决方法分享
前言
input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。
本文内容包括:
- 移动端底部input被弹出的键盘遮挡。
- 控制input显/隐密码。
- 在input中输入emoji表情导致请求失败。
- input多行输入显示换行。
- 输入框首尾清除空格-trim()
- 在input中监听键盘事件
移动端底部input被弹出的键盘遮挡
input输入框是通过position:fixed
一直放在页面底部,当点击input进行输入的时候,就会出现如下图片情况(有的机型会遮挡一些)。
当时这个问题是去年在ios中遇到的,在最新版的ios系统中,貌似解决了这个bug,但是为了向下兼容以及防止其他其他机型也出现这个问题,大家可以稍微记一下这个解决方法。
在解决这个问题的时候,有试过下面这种方法:
在input的focus事件中,开启一个定时器,然后每隔300毫秒进行一次document.body.scrollTop=document.body.scrollHeight的调整,运行3次即可。
当时还以为解决了,但是当你底部评论区还有很多内容,你每次点击input,想要输入的时候,整个页面通过scrollTop
就会不断的向下滚动,这个体验不用说自己也知道是相当失败的,然后就再去找解决方法,结果就有了下面这个。
Element.scrollIntoView()
Element.scrollIntoView():方法让当前的元素滚动到浏览器窗口的可视区域内。
document.querySelector('#inputId').scrollIntoView();
//只要在input的点击事件,或者获取焦点的事件中,加入这个api就好了
这个api还可以设置对齐方法,选择将input放在屏幕的上方/下方,类似的api还有:Element.scrollIntoViewIfNeeded(),这两个是解决同一个问题的,选择一个用就可以了。
控制input显/隐密码
这个就很简单了,只需更改input的type属性值就可以了。可以看一下codepen的demo
//点击函数,获取dom,判断更改属性。
show(){
let input=document.getElementById("inputId");
if(input.type=="password"){
input.type='text';
}else{
input.type='password';
}
}
在input中输入emoji表情导致请求失败
现在用户输入emoji简直已经成为了习惯,如果前后端没有对emoji表情进行处理,那么用户在上传的时候,就会请求失败。
通常这个问题是后端那边处理比较合适的,前端是做不了这件事的,或者说很难做这件事。
之前看过一篇文章,这个文章里面讲了怎么在上传和拿数据下来的时候不会报错,但是不能在显示的时候转换为表情。
ps:之前拿微信用户名的时候,有些人可能在微信昵称上面就会包含表情,如果后端没对表情处理转换,那么普通请求也会出错。
之所以说这个,当表单请求错误的时候各位如果实在找不到问题可以往这方面考虑一下,我真的被坑过的o(╥﹏╥)o。
input多行输入显示换行
在使用textarea
标签输入多行文本的时候,如果没有对多行文本显示处理,会导致没有换行的情况,就比如下面这种情况,用户在textarea
是有换行的。
Css属性:white-space
white-space 属性用于设置如何处理元素内的空白,其中包括空白符和换行符。
只要在显示内容的地方将该属性设置为white-space: pre-line
或者white-space:pre-wrap
,多行文本就可以换行了。
输入框首尾清除空格-trim()
输入框清除首尾空格是input较为常见的需求,通常在上传的时候将首尾空格去除掉。一般使用:字符串的原生方法trim() 从一个字符串的两端删除空白字符。
trim() 方法并不影响原字符串本身,它返回的是一个新的字符串。
原生清除方法:
//原生方法获取值,清除首尾空格上传str2
var str2 = document.getElementById("inputId").trim();
Vue清除方法:
Vue提供了修饰符删除首尾空格, 加了修饰符.trim
会自动过滤用户输入的首尾空白字符
<input v-model.trim="msg">
貌似angular也提供了类似过滤的方法,感兴趣的可以自己去查一下。
在input中监听键盘事件
在用户登录或者搜索框的时候,一般都会监听键盘事件绑定回车按键,来执行登录/搜索 等操作。
原生绑定:
<input onkeydown="keydownMsg(event)" type="text" />
function keydownMsg(key) {
keyCode = key.keyCode; //获取按键代码
if (keyCode == 13) { //判断按下的是否为回车键
// 在input上监听到回车 do something
}
}
Vue按键修饰符
Vue为监听键盘事件,提供了按键修饰符,并且为常用的按键提供了别名,使用方法如下:当回车按键在input中被按下的时候,会触发里面的函数。
<input @keyup.enter="enterActive">
结语
上述内容就是我遇到的一些input问题的解决方式以及跟input相关的一些东西,如果有什么错误,欢迎指正!希望大家看完可以有所收获,233。
Fundebug
原文链接:https://juejin.im/post/5af68903f265da0b84557fab
关于input的一些问题解决方法分享的更多相关文章
- 老出BUG怎么办?游戏服务器常见问题解决方法分享
在游戏开发中,我们经常会遇到一些技术难题,而其引发的bug则会影响整个游戏的品质.女性向手游<食物语>就曾遇到过一些开发上的难题,腾讯游戏学院专家团Wade.Zc.Jovi等专家为其提供了 ...
- mysql中文乱码 常见编码问题解决方法分享
我是真的服了 mysql默认字符不是utf-8也不是GBK而是拉丁文字?? 在增删数据时 “中文字符” 老是乱码不停!害得我浪费不少时间在这上面 为各位之后不走坑 再此留下解决方法 若想进一步了解编码 ...
- OpenStack安装部署管理中常见问题解决方法
一.网络问题-network 更多网络原理机制可以参考<OpenStack云平台的网络模式及其工作机制>. 1.1.控制节点与网络控制器区别 OpenStack平台中有两种类型的物理节点, ...
- php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)
原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz) 折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图 . 1. 删除.修改状态后无法刷新记录: 在dwz. ...
- #2006 - MySQL server has gone away 问题解决方法 (全) (转)
#2006 - MySQL server has gone away 问题解决方法 原文地址:http://www.cnblogs.com/bisonjob/archive/2009/08/18/15 ...
- cloudemanager安装时出现failed to receive heartbeat from agent问题解决方法(图文详解)
不多说,直接上干货! 安装cdh5到最后报如下错误: 安装失败,无法接受agent发出的检测信号. 确保主机名称正确 确保端口7182可在cloudera manager server上访问(检查防火 ...
- cloudemanager安装时出现8475 MainThread agent ERROR Heartbeating to 192.168.30.1:7182 failed问题解决方法(图文详解)
不多说,直接上干货! 问题详情 解决这个问题简单的,是因为有进程占用了.比如 # ps aux | grep super root ? Ss : : /opt/cm-/lib64/cmf/agen ...
- visualstudio2019 的报表技术rdlc在windows10上出现乱码的问题解决方法
vs2019 的报表技术rdlc在windows10上出现乱码的问题解决方法 现在好多新电脑默认是安装windows10 可能有些程序员还不习惯,但是这是趋势,windows10以下的系统漏洞很多,这 ...
- jquery ajax缓存问题解决方法小结
今天在做一个ajax数据提交功能开始利用get方式一直发现提交的数据都是一样,返回的数据也很久不刷新了,这个我知道是ajax缓存问题,后来在网上整理了一些ajax缓存问题解决方法,下面给大家分享一下. ...
随机推荐
- Ubuntu 14 安装Skype 4.3
Ubuntu 14 安装Skype 4.3Step 1: 删除老版本sudo apt-get remove skype skype-bin:i386 skype:i386 sudo apt-get i ...
- android驱动例子(LED灯控制)
本例子,讲述在android2.1上完全自已开发一个驱动去控制硬件口并写应用测试该驱动,通过这样一个例子,解析android下的驱动开发流程的应用调用流程,可以说是很好的入门引导 要达到的效果:通过a ...
- 自定义仪表盘PaneView
1.概述 最近学习自定义View,趁着周末做了一个仪表盘练练手,效果还可以,在此分享一下先上效果图(截图有点不清晰,凑合着看下吧) 项目在我的github上https://github.com/xsf ...
- Linux - RAID和LVM
什么是 RAID 磁盘阵列全名是『 Redundant Arrays of Inexpensive Disks, RAID 』,英翻中的意思是:容错式廉价磁盘阵列. RAID 可以透过一个技术(软件或 ...
- iOS开发小技巧总结
一.NSLog的使用 NSLog在调试的时候,屡试不爽,可是在项目中用的太多,其实是会影响程序性能的,而且程序在非调试模式下也看不到打印,多浪费资源呢?如果程序中使用的太多,发布前删除又是一个麻烦事, ...
- Spring 官网下载zip jar
第一步:打开官网:http://www.springsource.org/download/community: 第二步:点击图片 第三步:点击图标 第四步:找到如下链接,点击进去 第五步:再找到如下 ...
- 8 个实用的 Bootstrap 3 案例教程
Bootstrap 3发布各大设计论坛议论纷纷.这次Bootstrap 3最大的特点就是--扁平化.下面就是一些早期的Bootstrap 3例子,不过亲们注意咯,因为大部分最早期的测试案例,可能用到一 ...
- ubuntu12.04:Tomcat 7服务器:手动安装
1.下载tomcat7.0.34. 网址:http://tomcat.apache.org/ 2.下载的文件解压在下载: 进入目录: cd /usr/local 创建目录 : sudo mkdir d ...
- 循环赛日程编排c代码
#include <stdio.h> int m,s,n; int i,j; int a[100][100]; int sf(int n) { if(n%2!=0) printf(&quo ...
- mac os X中关于dayone缓存的实际文件位置
最近刚安装了mac版的dayone软件,感觉蛮不错的!以前一直用iphone版的,mac版是要米的,68米丫!想了想还是一咬牙:买了! 我用的是iCloud同步,虽然资料放在云中,但本地还是会有缓存的 ...