html div模拟input框

html div模拟input框

重点代码:contenteditable

只需要在div加这句contenteditable

其他标签也可以这么干

html div模拟input框

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

最终效果:

html div模拟input框

获取值跟普通input一样

document.getElementById("id").innerHTML

类似文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注