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

初始效果如下：

输入文字后：

转载于:https://www.cnblogs.com/xk-g/p/10244581.html