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 ...
一周排行
  • 题目:和上题一样,只是放宽了条件,旋转数组中数字可以重复出现. 思路:由于上题中在判断有序时是根据mid元素值与首尾元素比较得到的,考虑这种情况,10和01都是01的旋转数组,当首尾和中间元素都相等时,无法判断是mi ...
  • 现在上网真是不安全,去年的"万花谷",如果进入该网页浏览者注册表会被修改,好多系统功能因此受到限制.最近又听说有网友在浏览网页时硬盘被共享,危害似乎更大! 其实,所谓的浏览网页硬盘被共享,和&qu ...
  • 文/54doctor创始人 周鹏远世界上实际上只有两件事情:去了解一件事情和坚信别人已经知道的事情.去了解一件事情即所谓科学,而坚信别人已经了解的某件事情是无知.--希波克拉底对于国内医院而言,无论你欣喜.沉默亦或是 ...
  • 二.数据库系统的结构 1.数据库系统的三级模式结构 数据库管理系统的三级模式结构由外模式.模式和内模式组成. 外模式(external schema),或子模式(subschema)或用户模式(user schema ...
  • 对DBWR的一些理解 首先从名称上,DBWR全称是Database Writer Process,属于Oracle后台进程的一种,有的地方也叫DBWn,我想这里是出于DBWR进程个数的原因,DBWR进程在一个Orac ...
  • 还记得2013年初,曾经有基金公司放出这样的豪言:"今年我们要发行30只新产品!"然而,一年之后回过头来看,虽然一些基金公司发行的产品不少,但最终收效不大.面对互联网金融带来的巨大冲击,2014年 ...
  • 之前看过关老师的视频之后就有写关于视图切换的程序,不过那是很久之前了,那时候也不知道什么是View,什么是VIewController,就知道照着写.这次项目的时候,我又碰到了这个问题,我自以为比较能够掌握其中的精髓 ...
  • 按纽单击消息响应有以下几种方式:1.SendMessageLRESULT SendMessage( UINT message, WPARAM wParam = 0, LPARAM lParam = 0 );参数说明: ...
  • 苹果iOS8.3:Siri又有新功能,用户想要使用"嘿Siri"进行通话时,通话不会自动传输至扬声器.这意味着用户需要拿起iPhone或者手动点击扬声器按钮 苹果在iOS8.3中做出了很小,不过很 ...