VUE+Ant Design Vue:div模拟input实现输入框

目的

div模拟input实现输入框

实现方案

1. H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框（div可以根据内容自动调整高度）

H5代码块

<div class="search">
<div contenteditable class="inputType" placeholder='请输入文字'></div>
<div class="button">版权检索</div>
</div>

CSS代码块

双float + calc()计算属性[右边button固定 左边自适应]

/* 检索框 */
.search{
position: absolute;
z-index: 3;
left: 25%;
top: 220px;
width: 50%;
height: 40px;
margin: 0 auto;
border:1px solid rgba(0, 0, 0, 0.45);
background: #fff;
border-radius: 4px;
}
.inputType{
width:calc(100% - 90px);
float: left;
line-height: 38px;
height: 38px;
text-indent: 1em;
}
.inputType:empty::before {/* 显示提示词 */
content: attr(placeholder);
}
.button{
color: #fff;
line-height: 38px;
text-align: center;
background: rgba(204, 51, 0, 1);
border-left:1px solid rgba(0, 0, 0, 0.45);
width: 90px;
height: 38px;
float: right;
}

效果展示

窗口缩小后效果

• 点赞
• 收藏
• 分享
• 文章举报