contenteditable属性让div也可以当做输入框

2019/06/05 15:43
阅读数 306

你知道div也可以当做输入框么?

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

输入框语法

<element contenteditable="true|false">
    <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);
    }

这么写不是很完善,因为在聚焦的时候,placeholder中的内容不消失

可以写一个方法,模拟placeholder

因为只有input、textarea才能使用 ele.val(),所以这里使用 ele.text() 取值;当然这种方法可以在input处理兼容模拟 placeholder中使用。

<div class='input' contenteditable></div>
function checkValue(obj,tipText){
        $(obj).focus(function(){
            if( obj.text()== tipText ){
                obj.text("");
            }
        });
        $(obj).blur(function(){
            if( obj.text()=="" ){
                obj.text(tipText);
            }
        });
        if( $.trim( obj.text() )=="" ){
            obj.text(tipText);
        }
    }
    checkValue($(".input"),'请输入文字');

原文作者:Katherine_Lisa

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部