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 ...
随机推荐
- 基于约束的SQL攻击
前言 值得庆幸的是如今开发者在构建网站时,已经开始注重安全问题了.绝大部分开发者都意识到SQL注入漏洞的存在,在本文我想与读者共同去探讨另一种与SQL数据库相关的漏洞,其危害与SQL注入不相上下,但却 ...
- cocos2d-x学习之路（三）——精灵与动作
这里我们来看看所有游戏引擎中都会出现的一个重要的概念——精灵
- Shell 基础 -- 总结几种括号、引号的用法
Shell 脚本中经常需要用到一些括号.引号表达式,功能各不相同,本文详细介绍一下. 1.双引号 " " 双引号常用于包含一组字符串,在双引号中,除了 "$". ...
- 基于tensorflow使用全连接层函数实现多层神经网络并保存和读取模型
使用之前那个格式写法到后面层数多的话会很乱,所以编写了一个函数创建层,这样看起来可读性高点也更方便整理后期修改维护 #全连接层函数 def fcn_layer( inputs, #输入数据 input ...
- PHP Laravel Install and Quickstart
1.安装Laravel 一键安装包Laravel 要安装Laravel依赖的PHP7以上版本,以及php 扩展php-openssl php-pdo ... 以及Homestead github下载安 ...
- PAT甲级题解-1100. Mars Numbers (20)-字符串处理
没什么好说的,注意字符串的处理,以及当数字是13的倍数时,只需高位叫法的单词.比如26,是“hel”,而不是“hel tret”. 代码: #include <iostream> #inc ...
- 调研ios开发环境的演变
一:ios的发展演变: 以下两句为百度百科IOS,可自行查阅,不多赘述,就Ctrl+c,Ctrl+v两句表示一下. 2007年1月9日苹果公司在Macworld展览会上公布,随后于同年的6月发布第一版 ...
- 团队工作总结及自评 & 补上来的用户调研
http://www.cnblogs.com/case1/ 让同学代发了,辛苦点跳转一下~
- DOM之节点类型加例子
DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.D ...
- 12th final 发布评价 I
1. 约跑App——nice!:这次使用了摄像进行讲解,相比于上次能够更准确地向大家讲解,整体效果更好了,而且很好地针对同学提出的bug进行修改,能够在并不是很熟悉的领域做到这个程度已经很不容易了, ...