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

你知道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

巴特西

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

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

最新文章

热门文章