用 div 仿寫 input 和 textarea 功能

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;}

初始效果如下：

輸入文字后：