<!DOCTYPE html> <html lang=\"大众en\"大众> <head> <meta charset=\公众UTF-8\"大众> <title>Document</title> <style type=\"大众text/css\"大众> { margin: 0; padding: 0; } textarea { resize: none; } </style> </head> <script type=\"大众text/javascript\"大众 src=\"大众js/autosize.min.js\公众></script> <body> <textarea id=\"大众textarea\"大众 rows=\"大众1\"大众 placeholder=\"大众请输入内容...\"大众 maxlength=\"大众50\"大众></textarea> </body> <script type=\"大众text/javascript\"大众> autosize(document.querySelector('#textarea')); </script> </html>
注：由于textarea的默认高度为rows=2,以是须要将textarea的rows设置为1
方法2：div加属性contenteditable=true
我们知道可以将div的contenteditable设置伪true，将其变为可输入状态。代码如下：
<div contenteditable=\"大众true\"大众></div>
这样就知足了我们的第一个需求——高度自适应。但是在手机上测试会创造第一个问题，iOS上面无法输入。经由查找资料，创造只须要为其添加如下样式即可:
div{ user-select:text; -webkit-user-select:text;}
实现placeholder
利用css+js实现 placeholder，思路：根据输入通过动态添加class，仿照placeHolder的行为，代码如下:
// css.textarea { width: 400px; min-height: 20px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; line-height: 24px; padding: 2px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); position: relative; user-select: text; -webkit-user-select: text;}.placeholder:before { content: '请输入内容...'; line-height: 30px; position: absolute; left: 5px; top: 0; z-index: 1;}// html<div class=\公众textarea placeholder\"大众 contenteditable=\公众true\"大众 data-placeholder=\公众请输入内容...\"大众 data-length=\"大众10\公众><br /></div>// jsvar oInputBox = document.querySelector('.textarea');oInputBox.oninput = oInputBox.onpropertychange = function (ev) { var innterStr = oInputBox.innerText; var _this = this; // placeholder if (innterStr.length == 0) { _this.classList.add('placeholder'); } else { _this.classList.remove('placeholder'); }};
到此，我们已经实现了第二个需求——可以设置placeholder
实现maxlength
同样的，我们也不能通过直接设置maxlength来知足需求。以是通过监听input事宜来实时打算长度。
var oInputBox = document.querySelector('.textarea');oInputBox.oninput = oInputBox.onpropertychange = function (ev) { var innterStr = oInputBox.innerText; var _this = this; // maxlength var len = parseInt(_this.getAttribute('data-length')); if (innterStr.length > len) { oInputBox.innerText = innterStr.substring(0,len); }};
以上代码看上去没有问题，但是会创造光标会跑到最前方，这样就会造成不好的用户体验，乃至涌现Bug。以是在截取了最大长度的用户输入后，我们还须要将光标放到末了。完全JS代码如下：
var oInputBox = document.querySelector('.textarea');oInputBox.oninput = oInputBox.onpropertychange = function (ev) { var innterStr = oInputBox.innerText; var _this = this; // placeholder if (innterStr.length == 0) { _this.classList.add('placeholder'); } else { _this.classList.remove('placeholder'); } // maxlength var len = parseInt(_this.getAttribute('data-length')); if (innterStr.length > len) { oInputBox.innerText = innterStr.substring(0,len); } // div innerText重新赋值之后的光标问题 if(navigator.userAgent.indexOf('MSIE') > -1) { var range = document.selection.createRange(); _this.last = range; range.moveToElementText(_this); range.select(); document.selection.empty(); //取消选中 } else { var range = document.createRange(); range.selectNodeContents(_this); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); }};
到此为止，一个可以自动增加高度，并且支持placeholder和maxlength的输入框就完成了。
要点总结：
方法1：autosizejs方法通过监听textarea的input、keyup事宜动态的获取其scrollHeight，打算呈现实高度并合营overflow属性的改变来动态的改变 textarea的高度，此方法利用的时候须要把稳的是textarea的rows属性要设置为1，两行以内的高度自适应就会涌现问题；兼容性：IE9+方法2：div设置contentEditable为true后，输入或删除内容时，其高度本身就会随着内容的变革而变革，我们须要办理的问题只是在输入过程中光标的位置问题；兼容性：IE11及其他高等浏览器希望本文能帮助到您！点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍泼皮-_-）
关注 ｛我｝，享受文章首发体验！
每周重点占领一个前端技能难点。更多精彩前端内容私信 我 回答“教程”
原文链接：http://eux.baidu.com/blog/fe/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86
作者：李明
