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

最新推荐文章于 2024-08-05 21:45:31 发布

前端杨小白

最新推荐文章于 2024-08-05 21:45:31 发布

阅读量3k

点赞数

分类专栏： Ant Design Vue

本文链接：https://blog.csdn.net/yangwqi/article/details/101541415

版权

Ant Design Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目的

div模拟input实现输入框在这里插入图片描述

实现方案

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