ztf.net.cn
七牛云
您当前的位置: 首页 >  个人博客

input div


H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度哦)。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢?

先看下效果:

看下代码(code)呗:

<div class='input' contenteditable placeholder='请输入文字'></div>
/**css样式*/
        .input{
            width:200px;
            height:24px;
            line-height:24px;
            font-size:14px;
            padding:5px 8px;
            border:1px solid #ddd;
        }
        .input:empty::before {
            content: attr(placeholder);
        }
 
/**css样式*/
        .input{
            width:200px;
            height:24px;
            line-height:24px;
            font-size:14px;
            padding:5px 8px;
            border:1px solid #ddd;
        }
        .input:empty::before {
            content: attr(placeholder);
        }

contenteditable属性是干嘛的呢?

contenteditable属性定义了是否可编辑元素的内容;很官方的解释,有木有.....

contenteditable='true'表示该元素内容可编辑;'false'表示该元素内容不可编辑;

————————————————

版权声明:本文为CSDN博主「珍妮的小罐君」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_36671474/article/details/68064132

ZTF

ZTF|时间:2022-09-28

如果缘分安排我们相遇,请不要让她擦肩而过。扫一扫二维码,加我为好友吧!
标签云