JavaScript模拟QQ签名(HTML5 contenteditable属性)
例图：
一、思路
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)); // 更新数据库
})
});
三、完整实例
<!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>
JavaScript模拟QQ签名(HTML5 contenteditable属性)的更多相关文章
- HTML5它contenteditable属性
HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- HTML5之contenteditable属性
HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- 基于HTML5自定义文字背景生成QQ签名档
分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- html5全局属性
全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx" ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- HTML5 自动聚焦 属性
原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...
随机推荐
- git 报错 error: insufficient permission for adding an object to repository database ./objects
参照:http://stackoverflow.com/questions/1918524/error-pushing-to-github-insufficient-permission-for-ad ...
- 用opencv实现工控机的开机录像
需要训练一个神经网络模型,可能需要用到很多视频数据,所以我想把手头的工控机设置为上电自启动,再借助opencv编译一个可执行文件,放在windows开机启动文件夹里,这样只要连接好摄像头和工控机以及电 ...
- CentOS Docker环境搭建教程
安装与配置 Docker 安装 Docker Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: yum inst ...
- uc浏览器app点评
uc浏览器app我经常用,是我接触的第一款手机浏览器,感觉还不错的,uc浏览器新闻更新速度有点慢,有时候还闪退,以前在搜索栏粘贴文字后,如果想改后面的文字,根本就不行,用uc浏览器下东西速度比较慢,现 ...
- This is me
This is me 爱琴棋 爱书画 也爱格物 爱跋山 爱涉水 也爱深林 This is me. 刘伯承的诗词有曰“高耸入云”,于是“李入云”便成为了我一生的标记,也造就了一个时而安静,时而疯狂的我 ...
- Daily Scrum - 12/07
Meeting Minutes 确认基本完成了UI组件的基本功能的动画实现: 准备开始实行UI组件的合并: 讨论了长期计划算法的难点,以及简单版本的实现方案. 督促大家更新TFS: Burndown ...
- python数据分析所需要了解的操作。
import pandas as pd data_forest_fires = pd.read_csv("data/forestfires.csv", encoding='gbk' ...
- 团队项目作业五 - 旅游行业App分析
随着经济的发展,不论是在工作中的男女老少,还是在校园中的童鞋,都喜欢在假期来一场说走就走的旅行,来缓解生活中的各种压力.当然,在国家面临经济转型的情况下,更多的将工业,农业转向服务型的旅游业,各个省市 ...
- SQLServer2008只能编辑前面200行数据
设置编辑所有行:操作步骤:打开数据库-〉工具-〉选项-〉sqlserver对象资源管理器-〉命令 把200改为0,即可编辑所有行了
- WM_CONCAT和LISTAGG 语法例子
select to_char(replace(wm_concat(name), ',', '')) from codeitems where setid = 'A018' and ' like cod ...