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>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...