`
axl234
  • 浏览: 260888 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript模拟QQ签名(HTML5 contenteditable属性)

 
阅读更多

一、思路

1、单击元素时，使元素可以编辑，并获得焦点

2、按下键盘检测用户编辑元素中的文本

3、监听按下Enter键操作或离开可编辑元素焦点时，更新数据库

二、代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>contenteditable</title>
<style>
body, p {
    margin: 0;
    padding: 0;
}
.layout-box {
    padding: 10px;
    width: 300px;
    height: 36px;
    margin: 50px auto;
    background-color: green;
    font-size: 0;
}
#signature,
.layout-box:before {
    display: inline-block;
    vertical-align: middle;
}
.layout-box:before {
    content: '';
    width: 0;
    height: 100%;
    overflow: hidden;   
}
#signature {
    width: 100%;
    max-height: 36px;
    min-height: 18px;
    line-height: 18px;
    background-color: #FFF;
    font-size: 12px;
    color: #000;
    word-break: break-all;
}
#signature:focus {
    outline: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

<div class="layout-box">
    <p id="signature">编辑个性签名</p>
</div>

<script>
/*

一、思路

1、单击元素时，使元素可以编辑，并获得焦点
2、按下键盘检测用户编辑元素中的文本
3、监听按下Enter键操作或离开可编辑元素焦点时，更新数据库

*/

$(function(){
    // return obj { length: 字节长度, limitStr: 限定的字符串(字节长度小于等于intVal) }
    function getStringByteInfo ( string, intVal ) {
        var str = $.trim(string) || '', length = str.length, len, reg, charStr, limitStr = '';
        if ( length > 0 ) {
            len = 0;
            reg = /[^\x00-\xff]/;  // 匹配双字节字符(包括汉字在内)

            for ( var i = 0; i < length; i++) {
                charStr = str.charAt(i);
                if ( reg.test(charStr) ) {
                    len += 2;
                }
                else {
                    len ++;
                }
                if (len <= intVal) {
                    limitStr += str.charAt(i);
                }
            }
        }
        return {
            length: len || 0,
            limitStr: limitStr || ''
        }
    }

    // 检测文本字节长度
    function detectionLength ( jqObj ) {
        var $obj = jqObj || $(),
        str = $obj.text(),
        strObj = getStringByteInfo(str, 40);

        if (strObj.length > 40) {
            alert('最多只能输入40字节');
            $obj.text(strObj.limitStr);
        }
    }

    // 更新数据库
    function saveSignature ( jqObj ) {
        var $obj = jqObj || $(),
        str = $.trim($obj.text()),
        url = 'xxx?signature' + encodeURIComponent(str); // 假设这是发送ajax请求的url

        if (str != '' && str != '编辑个性签名') {
            $.ajax(url, {
                dataType: 'json',
                data: {},
                success: function(){
                    // do something
                },
                error: function(){},
                complete: function(){}
            });
        }
        else {
            $obj.text('编辑个性签名');
        }
    }

    // keyPress Liseners
    // 监听Enter键
    function enterLiseners ( jqObj, event ) {
        var $obj = jqObj || $(),
            code = event.keyCode || event.which;

        if (code === 13) {
            jqObj.removeAttr('contenteditable');
            saveSignature(jqObj);
        }
    }

    $('#signature')
    .bind('click', function(){
        $(this).attr('contenteditable', 'true').trigger('focus');
    })
    .bind('keydown', function(e){
        detectionLength($(this));
        enterLiseners($(this), e);  // 更新数据库
    })
    .bind('blur', function(){
        $(this).removeAttr('contenteditable');
        saveSignature($(this)); // 更新数据库
    })
});

</script>


</body>
</html>

分享到：
| HTML5--JS API-新的选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics