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 ...
一周排行
  • 产品功能简述:(本人联系方式:QQ:26451602,MT:15359287133)0.主CPU:三星cortex-a8架构的最高1G主频的处理器:S5PV210.我博客里有该芯片的详细介绍.1.主频:800MHZ ...
  • 蜗牛准备在WelcomeScene屏添加一个动画,在显示时,自动播放一次.通过查找教程,了解到这些实现技巧:   cocostudio是支持动画与骨骼动画编辑的,使用其AnimationEditor可以做到. 在An ...
  • 谈谈B树 1.前言: 动态查找树主要有:二叉查找树(Binary Search Tree),平衡二叉查找树(Balanced Binary Search Tree),红黑树(Red-Black Tree ),B-tr ...
  • 单刀直入,今天要讲的是自己写的一个WPF动画例子.我们在看下最终效果~ 最近在重看WPF编程宝典2010,在练习第15章动画性能例子时有了些想法.原始例子如下:  原始例子(打包了整个15章的) 它是一个可动态改变小 ...
  • linux nc命令<netcat>   功能说明:功能强大的网络工具 语 法:nc [-hlnruz][-g<网关...>][-G<指向器数目>][-i<延迟秒数>] ...
  • 我们发送重传包时,重传包也可能丢失,如果没有检查重传包是否丢失的机制,那么只能依靠超时来恢复了. 37版本把检查重传包是否丢失的部分独立出来,这就是tcp_mark_lost_retrans(). 在处理SACK块的 ...
  • 只升级mongodb的版本极为简单,更新/替换 bin/目录下的可执行文件即可. debian和osx上的升级,按步骤来,没什么好说的. http://docs.mongodb.org/manual/tutorial ...
  • http://filezilla-project.org/download.php?type=client 这里可以下到一个3.4.0的源码 解压后里面会有一个src/interface文件夹,里面有interfac ...
  • 最近有很多用户询问隐藏xp系统桌面图标的问题.那么隐藏xp系统桌面图标应该怎么做呢?下面与大家分享下具体的操作方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助 一般来说,现在的大多数人都会使用电脑,都懂一点儿电脑的 ...
  • 中新网7月10日电 据韩联社10日报道,调查显示,韩国人认为日本是韩国的第二大军事威胁,仅次于朝鲜.历史问题和领土争端是韩国人对日本印象不好的主要原因. 报道称,韩国东亚研究院(EAI)和日本市民团体"媒体 ...