NoPosition
2021-05-31 15:52
采纳率: 60%
浏览 134

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

如图,

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

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 风雪一更 2021-05-31 18:24
    已采纳

    看到上面兄弟的回复想到的思路,写了个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>
    

    附上效果展示

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

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

    已采纳该答案
    打赏 评论
  • input plachode不消失估计不能实现,这个灰色的字不一定必须是plachoder实现,其实你用一个span定位实现

    2 打赏 评论
  • NoPosition 2021-05-31 16:18

    经过思考,第二个问题用个中间变量保存补全前的内容就行了,目前就剩第一个问题了,求大佬给个思路

    打赏 评论

相关推荐 更多相似问题