例图：
一、思路
1、单击元素时，使元素可以编辑，并获得焦点
2、按下键盘检测用户编辑元素中的文本
3、监听按下Enter键操作或离开可编辑元素焦点时，更新数据库
二、代码
1 $(function(){ 2 // return obj { length: 字节长度, limitStr: 限定的字符串(字节长度小于等于intVal) } 3 function getStringByteInfo ( string, intVal ) { 4 var str = $.trim(string) || '', length = str.length, len, reg, charStr, limitStr = ''; 5 if ( length > 0 ) { 6 len = 0; 7 reg = /[^x00-xff]/; // 匹配双字节字符(包括汉字在内) 8 9 for ( var i = 0; i < length; i++) { 10 charStr = str.charAt(i); 11 if ( reg.test(charStr) ) { 12 len += 2; 13 } 14 else { 15 len ++; 16 } 17 if (len <= intVal) { 18 limitStr += str.charAt(i); 19 } 20 } 21 } 22 return { 23 length: len || 0, 24 limitStr: limitStr || '' 25 } 26 } 27 28 // 检测文本字节长度 29 function detectionLength ( jqObj ) { 30 var $obj = jqObj || $(), 31 str = $obj.text(), 32 strObj = getStringByteInfo(str, 40); 33 34 if (strObj.length > 40) { 35 alert('最多只能输入40字节'); 36 $obj.text(strObj.limitStr); 37 } 38 } 39 40 // 更新数据库 41 function saveSignature ( jqObj ) { 42 var $obj = jqObj || $(), 43 str = $.trim($obj.text()), 44 url = 'xxx?signature' + encodeURIComponent(str); // 假设这是发送ajax请求的url 45 46 if (str != '' && str != '编辑个性签名') { 47 $.ajax(url, { 48 dataType: 'json', 49 data: {}, 50 success: function(){ 51 // do something 52 }, 53 error: function(){}, 54 complete: function(){} 55 }); 56 } 57 else { 58 $obj.text('编辑个性签名'); 59 } 60 } 61 62 // keyPress Liseners 63 // 监听Enter键 64 function enterLiseners ( jqObj, event ) { 65 var $obj = jqObj || $(), 66 code = event.keyCode || event.which; 67 68 if (code === 13) { 69 jqObj.removeAttr('contenteditable'); 70 saveSignature(jqObj); 71 } 72 } 73 74 $('#signature') 75 .bind('click', function(){ 76 $(this).attr('contenteditable', 'true').trigger('focus'); 77 }) 78 .bind('keydown', function(e){ 79 detectionLength($(this)); 80 enterLiseners($(this), e); // 更新数据库 81 }) 82 .bind('blur', function(){ 83 $(this).removeAttr('contenteditable'); 84 saveSignature($(this)); // 更新数据库 85 }) 86 });
三、完整实例
<!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>