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

例图：

一、思路

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

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

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

二、代码

 1 $(function(){
 2     // return obj { length: 字节长度, limitStr: 限定的字符串(字节长度小于等于intVal) }
 3     function getStringByteInfo ( string, intVal ) {
 4         var str = $.trim(string) || '', length = str.length, len, reg, charStr, limitStr = '';
 5         if ( length > 0 ) {
 6             len = 0;
 7             reg = /[^\x00-\xff]/;  // 匹配双字节字符(包括汉字在内)
 8 
 9             for ( var i = 0; i < length; i++) {
10                 charStr = str.charAt(i);
11                 if ( reg.test(charStr) ) {
12                     len += 2;
13                 }
14                 else {
15                     len ++;
16                 }
17                 if (len <= intVal) {
18                     limitStr += str.charAt(i);
19                 }
20             }
21         }
22         return {
23             length: len || 0,
24             limitStr: limitStr || ''
25         }
26     }
27 
28     // 检测文本字节长度
29     function detectionLength ( jqObj ) {
30         var $obj = jqObj || $(),
31         str = $obj.text(),
32         strObj = getStringByteInfo(str, 40);
33 
34         if (strObj.length > 40) {
35             alert('最多只能输入40字节');
36             $obj.text(strObj.limitStr);
37         }
38     }
39 
40     // 更新数据库
41     function saveSignature ( jqObj ) {
42         var $obj = jqObj || $(),
43         str = $.trim($obj.text()),
44         url = 'xxx?signature' + encodeURIComponent(str); // 假设这是发送ajax请求的url
45 
46         if (str != '' && str != '编辑个性签名') {
47             $.ajax(url, {
48                 dataType: 'json',
49                 data: {},
50                 success: function(){
51                     // do something
52                 },
53                 error: function(){},
54                 complete: function(){}
55             });
56         }
57         else {
58             $obj.text('编辑个性签名');
59         }
60     }
61 
62     // keyPress Liseners
63     // 监听Enter键
64     function enterLiseners ( jqObj, event ) {
65         var $obj = jqObj || $(),
66             code = event.keyCode || event.which;
67 
68         if (code === 13) {
69             jqObj.removeAttr('contenteditable');
70             saveSignature(jqObj);
71         }
72     }
73 
74     $('#signature')
75     .bind('click', function(){
76         $(this).attr('contenteditable', 'true').trigger('focus');
77     })
78     .bind('keydown', function(e){
79         detectionLength($(this));
80         enterLiseners($(this), e);  // 更新数据库
81     })
82     .bind('blur', function(){
83         $(this).removeAttr('contenteditable');
84         saveSignature($(this)); // 更新数据库
85     })
86 });

三、完整实例

<!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>
View Code

 

posted @ 2013-07-18 14:52  杨君华  阅读(1623)  评论(0)  编辑  收藏  举报