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

 

你可能感兴趣的:(contenteditable)