<!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>
- 浏览: 260885 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
JavaScript模拟QQ签名(HTML5 contenteditable属性)
- 博客分类:
- javascript
- jquery
发表评论
-
Javascript类定义语法,私有成员、受保护成员、静态成员等
2014-05-29 10:59 728JS只是一门支持面向对象编程的语言,通过OO可以让我们的 ... -
Javascript 继承模式
2014-05-29 10:59 725在面向对象的JavaScript开发中使用继承可以提高代码 ... -
用JavaScript实现自己的DOM选择器
2014-05-28 14:27 687解释器模式(Interpreter):定义一种语法格式,通过 ... -
Javsript代码的注释和模块定义
2014-05-28 14:21 841可以这样定义模块: (function(ns, re ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 803单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1010/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8861. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1215看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1337jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 883<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 658这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 643Codiqa,https://codiqa.com 简单试用 ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1220除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 629当前在互联网上, ... -
使用console.table()调试javascript
2014-01-20 15:42 614或许你已经习惯了console.log()来调试js,非常好 ... -
JS对象复制
2014-01-17 16:18 610在JavaScript很多人复制 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2287<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 931<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 592一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
2013-12-19 15:47 809IE6-IE8浏览器,按照现代浏览器的API来工作就好了!也 ...
相关推荐
contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。 当为空字符串时,效果和true一致。 当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,...
angular-contenteditable, "contenteditable" 属性的Angular 模型 角 contenteditable 一个AngularJS指令,用于将html标记与 contenteditable 属性绑定到模型。安装bower install angular-contenteditable
html5开发
利用contenteditable属性,div标签里的文本将可以编辑。借助execCommand,div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能,生成跟HTML所见一模一样的SVG文本。 yarn install ...
因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑。 contenteditable属性兼容所有浏览器(IE6之前的版本是否兼容未测试) 在有些时候我们完全可以用DIV去替代input或者textarea来达到...
解压密码:RJ4587 记得之前我们分享过一款jQuery轻量级网页编辑器和CSS3可视化网页编辑器 基于tinymce编辑器,都非常实用,今天我们再来分享一款利用HTML5 contenteditable属性实现的简易网页编辑器,目前我们只实现...
主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能
用于contenteditable HTML属性的最大长度插件 用于contenteditable html属性的简单maxlength插件验证器,此插件不允许您放置超过指定的最大长度,还检查了从剪贴板粘贴的情况。 演示链接 安装 npm $ npm install ...
全局属性;全局属性简介;全局属性简介;draggable属性;draggable属性;hidden属性;spellcheck属性;spellcheck属性;contenteditable属性;contenteditable属性;总结;总结;感
最近在做一评论功能,需要能够评论表情,那 contentEditable 这个属性就首当其冲了,结果,问题来了… 首先 评论区 长这样: 当输入内容超过限制的时候,清空用户输入超过限制后的内容。 这个好说… 但是清空...
主要介绍了使用HTML5中的contentEditable来将文本自动增高的方法,文章先对contentEditable这个HTML5中的新属性作了一个简单介绍,需要的朋友可以参考下
汇总了html5中所有事件属性HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag...以及在html5中标签属性:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-...
CEHighlighter.js 是一个轻量级的 javascript 库,它可以在 HTML 元素中实现简单的语法高亮并将它们转换为可编辑的内容。 默认情况下,它会突出显示链接、推特提及和主题标签。 可以使用您自己的正则表达式和模板...
它是用JavaScript编写的,并且可以在网络浏览器中运行。有关该项目的更多信息,请查看mediawiki.org上的页面。正在安装有关设置VisualEditor的信息,请参见发展有关运行测试和向VisualEditor提供代码的信息,请参见...
非常的简单 一、打开你要黑的网站, 二、在浏览器的地址栏里输入: 代码如下: [removed]document.body.contentEditable=’true’; document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由...
使页面可编辑 扩展,使页面可编辑添加contenteditable属性的<body> 。按图标开始编辑,完成后再按一次。一旦页面重新加载更改你已经消失。 支持语言:English,русский
vue-input-contenteditable 输入不受input[type='text']限制的精美输入。 Vue组件包装器,可通过您期望的所有功能进行contenteditable : 模型 占位符 最长长度 安装 npm i vue-input-contenteditable 用法 下面...