<!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>
- 浏览: 263466 次
- 性别:
- 来自: 北京
-
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
发表评论
-
Javascript类定义语法,私有成员、受保护成员、静态成员等
2014-05-29 10:59 740JS只是一门支持面向对象编程的语言,通过OO可以让我们的 ... -
Javascript 继承模式
2014-05-29 10:59 735在面向对象的JavaScript开发中使用继承可以提高代码 ... -
用JavaScript实现自己的DOM选择器
2014-05-28 14:27 695解释器模式(Interpreter):定义一种语法格式,通过 ... -
Javsript代码的注释和模块定义
2014-05-28 14:21 856可以这样定义模块: (function(ns, re ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 815单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1021/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8971. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1230看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1349jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 894<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 672这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 653Codiqa,https://codiqa.com 简单试用 ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1252除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 641当前在互联网上, ... -
使用console.table()调试javascript
2014-01-20 15:42 630或许你已经习惯了console.log()来调试js,非常好 ... -
JS对象复制
2014-01-17 16:18 617在JavaScript很多人复制 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2302<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 946<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 605一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
2013-12-19 15:47 816IE6-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属性实现的简易网页编辑器,目前我们只实现...
HTML5中的`contentEditable`属性是一个非常实用的功能,它允许开发者将任何HTML元素转换为可编辑区域,使得用户可以直接在页面上编辑文本内容。这个属性是HTML5的新特性,最初由微软在Internet Explorer中引入,随后...
主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能
用于contenteditable HTML属性的最大长度插件 用于contenteditable html属性的简单maxlength插件验证器,此插件不允许您放置超过指定的最大长度,还检查了从剪贴板粘贴的情况。 演示链接 安装 npm $ npm install ...
2. **富文本编辑**:编辑器通过创建一个隐藏的iframe或者div元素,并设置其contentEditable属性为true,使得用户可以直接在浏览器内进行文本编辑。编辑的内容会被实时转换成HTML格式,以便于在网络上传输和存储。 3...
全局属性;全局属性简介;全局属性简介;draggable属性;draggable属性;hidden属性;spellcheck属性;spellcheck属性;contenteditable属性;contenteditable属性;总结;总结;感
在 electron+vue 实现 div contenteditable 截图功能中,还需要使用到 contenteditable 属性,该属性用于指定元素是否可以被编辑。在这个应用程序中,contenteditable 属性用于允许用户编辑 div 元素中的内容。 ...
HTML5是现代网页开发的标准,它引入了许多新的特性和改进,极大地丰富了Web...在实际开发中,结合CSS和JavaScript,HTML5能够实现更丰富的交互和视觉效果。学习并熟练运用这些特性,将有助于提升网页设计的质量和效率。
最近在做一评论功能,需要能够评论表情,那 contentEditable 这个属性就首当其冲了,结果,问题来了… 首先 评论区 长这样: 当输入内容超过限制的时候,清空用户输入超过限制后的内容。 这个好说… 但是清空...
在这个教学课件中,我们主要关注的是HTML5新增的一些属性,这些属性极大地扩展了HTML元素的功能和交互性。 1. **contextmenu属性**:这个属性允许开发者自定义元素的右键上下文菜单。通过指定`<menu>`元素的ID,...
HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...
它可能也利用了HTML5的特性,如contentEditable属性,使得任何HTML元素都可以变成可编辑区域。 总的来说,这个项目展示了如何使用JavaScript和VB.NET结合,构建一个完整的前端到后端的解决方案。对于开发者来说,这...
汇总了html5中所有事件属性HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag...以及在html5中标签属性:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template