html div模拟input框

html div模拟input框

重点代码：contenteditable

只需要在div加这句contenteditable

其他标签也可以这么干

html部分：

<span>
  <div class="input" contenteditable placeholder="短信模板标题"></div>
</span>

<span>
  <div class="input input_textarea" contenteditable placeholder="短信模板内容（70字内）"></div>
</span>

CSS部分：

.input {
    margin: 10px 0px;
    margin-top: 30px;
    border: none;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    background-color: white;
}

.input:empty::before {
    color: #9fa1a3;
    content: attr(placeholder);
}

.input_textarea{
    height: 150px;
}

最终效果：

获取值跟普通input一样

document.getElementById("id").innerHTML