element input获取焦点显示补全前的内容并可修改，失去焦点自动补全

Question

如图，

第一，怎么做到placeholder获取焦点时不隐藏。

第二，怎么实现失去焦点自动select的文字内容，点击修改获取焦点时仅能修改补全前的内容，后面的placeholder为不可选状态？【试过用focus、blur，但再次修改完失去焦点后会自动补全重复的内容】

Answer 1

看到上面兄弟的回复想到的思路，写了个demo，经检测没问题，你可以试试

<template>
  <div class="wrap">
    <div class="item">
      <span>输入框：</span>
      <div class="input-box">
        <el-input v-model="content"></el-input>
        <div class="showBox">
          <span class="content">{{content}}</span>
          <span class="placeholder">我是提示</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Annual',
  data() {
    return {
      content:""
    }
  },
}
</script>

<style scoped="scoped">
  .wrap{
    padding: 50px;
  }
  .input-box{
    display: inline-block;
    position: relative;
  }
  .el-input{
    width: 200px;
  }
  .el-input /deep/ input{
    color: transparent !important;
  }
  .showBox{
    position: absolute;
    top: 12px;
    left: 16px;
  }
  .placeholder{
    font-size: 12px;
    color: grey;
  }
</style>

附上效果展示

提示 会随着 内容 输入向后移动。

只是个简单的样式，提供个思路，还有些东西你看需要自己设置，比如说设置文字不可选中之类的，避免重影