设置div等标签变为输入框以及placeholder配置

想让一个div具有类似于输入框的效果，有至少两种方法实现：

1.设定一个属性：contenteditable为true。这是一个很神奇的属性，可以很轻易的实现该效果。

<div contenteditable="true"></div>

2.使用css实现，添加并配置-webkit-user-modify属性：

（赋值read-write-plaintext-only即可实现读写，除此之外还有read-only（只读）等可以使用。）

<div class="ownInput"></div>

.ownInput {
    -webkit-user-modify: read-write-plaintext-only !important;
}

如何设置一个placeholder？

当然这种方法制作的输入框直接使用placeholder肯定是不生效的，因此需要进行一些处理。

1.先自定义两个属性，一个用于存放默认的placeholder值，另一个备份一个真正的值。

下面举一个例子（此处item.value为输入框中对应的值，当值为空时，展示placeholder。ps：值的绑定本文先不做讲解）：

<div class="ownInput" 
    v-for="(item, index) in tableList"
    :default-placeholder="item.value?'':item.placeholder"
    :placeholder="item.placeholder"
    >
</div>

ps：这里是根据tableList循环生成的输入框，在里面添加了placeholder属性，确保每个placeholder都是真正想要的不一样的属性。（下方为示例）

tableList: [
     {
           title: '输入框1',
           value: '',
           placeholder: '请输入内容1'

     },
     {
           title: '输入框2',
           value: '',
           placeholder: '请输入内容2'
     },
     {
           title: '输入框3',
           value: '',
           placeholder: '请输入内容3'
     },


...

2.设定伪元素，实现placeholder文字：

（提高attr获取自定义的default-placeholder属性值，并添加为伪元素的内容）

.ownInput::before {
    content: attr(default-placeholder);
    color: #ddd;
    position: absolute;
    cursor: text;
}

3.输入框标签上分别对获取/失去焦点进行属性值的改变：

<!-- 使用focus与blur处理，获取焦点default-placeholder变为空 -->

<div class="ownInput" 
    v-for="(item, index) in tableList"
    :default-placeholder="item.value?'':item.placeholder"
    :placeholder="item.placeholder"
    @focus="(e) => {e.target.setAttribute('default-placeholder','')}"
    @blur="blurFun($event,item)"
    >
</div>

失去焦点对应的方法(这时，存储的placeholder属性就发挥作用了)：

blurFun(event, res) {
     //    ......
     if(!res.value) {
            // 失去焦点但值为空时，还原default-placeholder为存放的placeholder属性值
           event.target.setAttribute('default-placeholder',event.target.getAttribute('placeholder'));
     }
},

效果实现~

 

希望本文会对你有所帮助 ^_^