jquery 实现可编辑div
2015-08-08 17:08
567 查看
html大致如下:
在js文件给 Eidt按钮添加事件并实现.test-holder的div的可编辑化:
效果图:
参考资料:
http://blog.csdn.net/billhepeng/article/details/7409125
<ol id="ol_group" class="list-group list_of_items"> <li class="list-group-item completed_item"> <div class="text_holder"> how are you? <div class="btn-group pull-right"> <button class="delete btn btn-warning">Delete</button> <button class="edit btn btn-success">Edit</button> </div> </div> <div class="checkbox"> <label> <input type="checkbox" class="pull-right"> </label> </div> </li> </ol>(这只是一部分,但演示效果够了)
在js文件给 Eidt按钮添加事件并实现.test-holder的div的可编辑化:
body.on('click', '.text_holder .btn-group .edit', function(){ var divedit = $(this).parent().parent(); if (!divedit){ return; } if (divedit.children("input").length > 0) { return; } var mtext = divedit.text().substring(0, divedit.text().length-10); var inputIns = $("<input type='text'/>"); //创建input 输入框 var oldtext = divedit.html(); //保存原有的值 inputIns.width(divedit.width()/3*2); //设置INPUT与DIV宽度一致 inputIns.val(mtext); divedit.html(""); //删除原来单元格DIV内容 inputIns.appendTo(divedit).focus().select(); //将需要插入的输入框代码插入DOM节点中 inputIns.click(function () { return false; }); //处理回车和ESC事件 inputIns.keyup(function (event) { var keycode = event.which; if (keycode == 13) { var newText = oldtext.replace(mtext, $(this).val()); divedit.html(newText); //设置新值 } if (keycode == 27) { divedit.html(oldtext); //返回旧值 } }).blur( function (event) { if($(this).val() != oldtext){ var newText = oldtext.replace(mtext, $(this).val()); divedit.html(newText); //设置新值 }else{ divedit.html(oldtext); } } ); });
效果图:
参考资料:
http://blog.csdn.net/billhepeng/article/details/7409125
相关文章推荐
- jq实现全选功能
- jQuery 加载等待 转圈
- jQuery实现Tab,滑动门,选项卡,图片切换
- jQuery中checkbo添加事件,判断是否选中和设置选中与取消选中
- jquery源码阅读之jquery.extend
- jquery ajax && php foreach array
- jQuery ajax jsonp实现跨域请求
- jquery仿百度百科底部浮动导航特效
- Jquery easyui开启行编辑模式增删改操作
- jQuery ajax参数详解
- jquery实现页面虚拟键盘特效
- jquery实现文本框输入字母或数字
- jQuery,使用on代替delegate,live 写法区别
- jquery中对动态生成的标签不会响应click事件
- jquery中对动态生成的标签不会响应click事件
- jQuery操作DOM和CSS函数
- Jquery实现顶部弹出框特效
- Jquery获取同名input的值的最好方式
- jQuery中的quickExpr
- Jquery数字上下滚动动态切换插件