JavaScript模拟QQ签字(HTML5 contenteditable属性) _HTML/CSS

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

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