jquery 实现可编辑div

 

html大致如下:

 


  1. how are you?
(这只是一部分,但演示效果够了)

 

jquery 实现可编辑div

在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 输入框
    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);
            }
        }
    );
});

效果图:

 

jquery 实现可编辑div

 

更多相关文章
  • 文/熊刀"千呼万唤始出来,犹抱琵琶半遮面" 北京时间今天凌晨的这场苹果春季新品发布会上的一大部分时间再次留给了Apple Watch,这个寄托了万千可穿戴智能设备从业人员厚望的产品在举办了一次V2.0发布会以后,终于羞羞答答的给出了4月26日这个发售时间,以及出人意料的把中国大陆 ...
  • 据外国媒体报道,随着苹果 iPhone 4于6月24日开始在全球推出,日本市场的iPhone 4迷们也开始涌至日本苹果旗舰店以及运营商软银公司门口,以期获得向往已久的iPhone 4新产品.        尽管新版iPhone 4手机定于6月24日在美国.法国.德国.英国和日本等市场共同推出,但由于 ...
  • 本周,"舞客变种"(Backdoor.Wuca.jq)出动,伪装成某安全工具,骗取网民信任.        "舞客"是一个后门病毒,运行后,在被感染系统的后台执行命令"cmd /c taskkill /imcfmon.exe /f",结束可 ...
  • ##db2move db2move 是一个数据移动工具,可以用来在 DB2 数据库之间移动大量的表.该命令中支持的操作有 EXPORT.IMPORT 和 LOAD.db2move 的语法可以象下面那样简单:db2move database_name action options该工具先从系统目录表中 ...
  • [.net 面向对象程序设计进阶] (13) 序列化(Serialization)(五) Json 序列化利器 Newtonsoft.Json 及 通用Json类 本节导读:  关于JSON序列化,不能不了解Json.net(Newtonsoft.Json)这款世界级的开源类库,除了拥有良好的性能之 ...
  • 最大流(MaxFlow)问题 给定指定的一个有向图,其中有两个特殊的点源S(Sources)和汇T(Sinks),每条边有指定的容量(Capacity),求满足条件的从S到T的最大流(MaxFlow). 想象一条多条不同水流量的水管组成的网络, s为供水广, t为水用户, 最大流问题就是找到能够在s ...
一周排行
  • create table testabc(        a     Number,        b     Date ); insert into testabc(a,b) values(1, TO_DATE(1 ...
  • <select id="applyType" name="$!{status.expression}" class="inp" onchange=&q ...
  •  VC中预处理指令与宏定义的妙用(1)作者: 刘巍Monday, June 24 2002 8 AM刚接触到MFC编程的人往往会被MFC 向导生成的各种宏定义和预处理指令所吓倒,但是预处理和宏定义又是C语言的 ...
  • GNU版本的printf命令用来格式化输出,效果类似与C语言的printf函数.2.x以上版本的Bash内建的printf命令和e/usr/bin下的printf命令使用方法一样. 例子:$printf " ...
  •          最近在做drp项目,其中有一个功能是实现文件的文件的上传!以前在想ITOO项目的时候,也做过这种功能,不过那个是.net的,虽说思想是一样的,但是用的技术还是有很多的不一样的!还想写一下!      ...
  • 如果试用Jenkins进行构建,构建中的测试结果可以直接作为Testlink的自动直接结果.   1. Testlink 中新增custom field.   2. 用例中custom field中加入该用例对应测试 ...
  • 当你不小心,写错了提交的注视/信息,该如何处理呢.理论上,SCM是不应该修改历史的信息的,提交的注释也是. 不过在git中,其commit提供了一个--amend参数,可以修改最后一次提交的信息.但是如果你已经pus ...
  • 易网科技讯 11月19日消息,据国外媒体报道,美国租车应用Uber商业高级副总裁埃米尔·迈克尔(Emil Michael)上周在纽约的一个晚宴上表示,Uber应该考虑雇佣一个由研究者组成的团队,以深挖曾批评该公司的媒 ...
  • 书名:<黑客与画家> 作者:Paul Graham 阮一峰 [译] 出版社:人民邮电出版社 推荐理由:跟随硅谷创业之父,走进黑客的世界 作者介绍: Paul Graham,Lisp专家,世界上首个互联网应 ...
  • 1.多表头表格代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...