div仿寫input和textarea

input不能換行，textarea也不能跟隨內容多少而增加高度。

contenteditable = true;

<div class="msg_content" contenteditable="true" placeholder='在這里輸入您的留言或建議'></div> .msg_content {box-sizing: border-box; background: #fafafa;border: 1px solid #dedede; border-radius: 20px; padding: 15px 20px;font-size: 30px; line-height: 40px; color: #333; outline: 0;-webkit-user-select: text;/* 在ios上有時不能輸入文字，添上這個后ok */word-break: break-all; word-wrap: break-word; } .msg_content:empty:before { content: attr(placeholder); color: rgba(0, 0, 0, .5);} /* 模仿placeholder*/ .msg_content:focus:before { content: none;}

初始效果如下：

輸入文字后：

轉載于:https://www.cnblogs.com/xk-g/p/10244581.html

總結

以上是生活随笔為你收集整理的用 div 仿写 input 和 textarea 功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。