前言input是我们接受用户数据的一个常见标签。在前端开发中，相信大家都会用到这个标签，所以我们在开发过程中有时候会遇到一些问题，本文的内容是在爱上输入的过程中产生的，记录下来分享这里。喜欢的话可以点赞/关注，支持一下。希望你看完这篇文章后有所收获。看看我的个人博客：obkoro1.com这篇文章包括：移动端底部输入被弹出键盘挡住。控制输入??显示/隐藏密码。在输入中输入表情符号会导致请求失败。input多行输入显示换行符。清除输入框首尾的空格-trim()监听输入中的键盘事件。移动端底部输入被弹出键盘挡住。通过position:fixed输入框始终位于页面底部。图片条件（部分机型会遮挡部分）。当时这个问题是去年在ios中遇到的。在最新版的ios系统中，这个bug貌似已经解决了，但是为了向下兼容和防止其他机型出现这个问题，大家可以稍微记住一下。解决方案。解决这个问题时，我尝试过以下方法：在input的focus事件中，启动一个定时器，然后每隔300毫秒调整一次document.body.scrollTop=document.body.scrollHeight，运行3次。当时以为解决了，但是当你在底部评论区还有很多内容的时候，每次点击input想进入的时候，整个页面都会通过scrollTop不断往下滚动。不用说，我也知道，这次的经验是挺失败的，然后就去找解决办法，结果就是下面这样。Element.scrollIntoView()Element.scrollIntoView()：方法将当前元素滚动到浏览器窗口的可见区域。document.querySelector('#inputId').scrollIntoView();//只要在input的点击事件或者focus事件中加上这个api，这个api还可以设置对齐方式，选择将input放到屏幕上上面/下面，有类似的API：Element.scrollIntoViewIfNeeded()，这两个解决的是同一个问题，选一个用就行了。控制输入??显示/隐藏密码非常简单，只需更改输入的type属性值即可。可以看看codepen的demo//点击函数获取dom，判断和改变属性。show(){letinput=document.getElementById("inputId");if(input.type=="password"){input.type='text';}else{input.type='password';}}输入在文件中输入emoji表情会导致请求失败。现在输入emoji表情已经成为用户的习惯。如果前后端不对emoji表情进行处理，用户上传时请求会失败。通常这个问题比较适合后端来处理，而前端做不到这个，或者说很难做这个。之前看过一篇文章。这篇文章讲了如何在上传和取数据的时候不报错，但是在展示的时候不能转成表情。ps：之前使用微信用户名时，有些人可能会在微信昵称上加表情。如果后台不对表情进行转换，那么普通的请求也会出错。之所以这么说，是因为如果在表单请求出错的时候真的找不到问题，可以从这方面考虑一下。我真的被骗了o(╥﹏╥)o。textarea多行回车换行，显示时换行设置：使用textarea标签输入多行文字时，如果多行文字不显示和处理，则不会出现换行，如以下情况，用户进入textarea有一个换行符。css属性：white-spacewhite-space属性用于设置如何处理元素内的空白，包括空白和换行。只要在显示内容的地方将该属性设置为white-space:pre-line或white-space:pre-wrap，就可以对多行??文本进行换行。设置后显示效果：清空输入框首尾空格-trim()清空输入框首尾空格是输入的常见需求。通常，上传时去掉开头和结尾的空格。一般用法：字符串原生方法trim()删除字符串两端的空白字符。trim()方法不影响原始字符串本身，它返回一个新字符串。原生清除方法：//原生方法获取值，清除首末空格并上传str2varstr2=document.getElementById("inputId").trim();vue清空方法：vue提供修饰符删除首末空格，加上修饰符.trim会自动过滤用户输入的首末空格
