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

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

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

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

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

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

如何设置一个placeholder?

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

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

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

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.输入框标签上分别对获取/失去焦点进行属性值的改变:



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

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

效果实现~

 

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

你可能感兴趣的:(前端,javascript,开发语言)