先看效果：初始的效果，样式多少有点问题，不重要！重要的是功能！
输入后： 根据文字长度，决定文本域长度 + 限制文字数量
话不多说，直接上代码！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <style type="text/css"> .foot-send-img img { width: 20px; height: 20px; } .text-input_5ZOdm{ display: flex; justify-content: center; align-items: end; position: relative; box-sizing: border-box; font-family: Arial,Helvetica,sans-serif; width: 649px; height: 40px; background: #FFFFFF; box-shadow: 0px 0px 6px 1px #ee1903; border-radius: 10px; } .text-container{ width: 100%; height:100%; } .text-input-textarea_chat{ background: #FFFFFF; line-height: 28px; border-radius: 10px; resize: none; outline-color: #ffff; width: 100%; height: 100%; border: none; outline: none; word-break: break-word; font-size: 16px; overflow: hidden; padding-left: 14px; padding-top: 7px; } .chat-number{ float: right; position: relative; font-size: 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #D1D1D1; bottom: 22px; margin-right: 10px; } .foot-send-img{ width: 55px; background: #FFA245; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 34px; bottom: 3px; position: relative; } .sidebar_right-left{ display: flex; align-items: center; padding-left: 76px; } </style> <body> <div class="sidebar_right-left"> <div class="text-input_5ZOdm text-enable_3rWFc"> <div class="text-container"> <textarea class="text-input-textarea_chat chat-input-size" id="chat-input-size" placeholder="请问我 您想了解的问题" maxlength="50"></textarea> <p class="chat-number"><span id="textNum">0</span>/<span>50</span></p> </div> <div class="foot-send-img" id="send-btn"> <img src="./images/img1.jpg" align="middle" class="chat-foot-send"> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $("#chat-input-size").on('focus input',function(){ var textarea = $('#chat-input-size'); computerTextareaRows(textarea); var text = textarea.val(); var counter = text.length; if (text.indexOf("请问我您想了解的问题") > -1){ textarea.val('') } $("#textNum").text(counter); if(counter >= 50){ $('.chat-number').css('color','#FF7F7F'); return false; }else{ $('.chat-number').css('color','#D1D1D1'); } }).on('blur',function(){ var textarea = $('#chat-input-size'); var text = textarea.val(); if (text === ''){ textarea.val('请问我您想了解的问题') } }) //根据texarea行数设置高度 function computerTextareaRows(textarea) { var lineHeight = parseFloat(textarea.css('line-height')); var paddingTop = parseFloat(textarea.css('padding-top')); var paddingBottom = parseFloat(textarea.css('padding-bottom')); // 计算行数 var contentHeight = textarea[0].scrollHeight - paddingTop - paddingBottom; let proportion = contentHeight / lineHeight; var rows = proportion < 2 ? 1 : Math.ceil(contentHeight / lineHeight); // console.log(rows,textarea[0].scrollHeight,proportion) if (rows>1){ $('#chat-input-size').css('height','40px'); $('.text-input_5ZOdm').css('height', 'auto'); $('.text-input_5ZOdm').css('height', textarea[0].scrollHeight+'px'); $('#chat-input-size').css('height',textarea[0].scrollHeight+'px'); // $('#send-btn').css('margin-top','20px'); } else { $('.text-input_5ZOdm').css('height','40px'); // $('#send-btn').css('margin-top','0px'); } return rows; } </script> </html>
ps:
1 .样式请自行调整！
2 .此处代码为了方便测试，使用的是线上的jquery地址，使用时，请更换自己的路径地址！
