关于input的一些问题解决方法分享

前言

input是咱们接受来自用户的数据经常使用标签，在前端开发中，相信每一个人都会用到这个标签，因此在开发过程当中也时候也会遇到一些问题，本文的内容是我在跟input相爱相杀过程当中产生的，在此记录分享一下。若是喜欢的话能够点波赞/关注，支持一下，但愿你们看完本文能够有所收获。

我的博客了解一下：obkoro1.com

---

本文内容包括：

1. 移动端底部input被弹出的键盘遮挡。
2. 控制input显/隐密码。
3. 在input中输入emoji表情致使请求失败。
4. input多行输入显示换行。
5. 输入框首尾清除空格-trim()
6. 在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。

---

textarea多行回车换行，显示的时候换行设置：

在使用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。

但愿看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。

我的blog and 掘金我的主页，如需转载，请放上原文连接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的很差之处，不撕逼，可是欢迎指点。

若是喜欢本文的话，能够关注一下我刚开的订阅号，漫漫技术路，期待将来共同窗习成长。

以上2018.5.12

参考资料：

Element.scrollIntoView()

移动前端手机输入法自带emoji表情字符处理

white-space

String.prototype.trim()

Vue按键修饰符

keyCode键码值表