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 ...
一周排行
  • 在做python学习的时候,我照着pdf,敲代码,遇到一大难题: return render_to_response('index.html',{'title':'my page','user':user,'book ...
  • cocos2d-x 3.1.1源码阅读过程的注释 印象笔记链接:http://app.yinxiang.com/l/AAU8F1mKiN9BIqFopReAU3ZbTcgGOULycQo/ Ref 每个类的基类是Re ...
  • ·网站名称:Whostalkin (http://www.whostalkin.com/) ·上线时间:2008年 ·所在地点:美国 Whostalkin是一个社会化媒体搜索引擎,可以在Twitter.FriendF ...
  •       继上篇介绍了如何创建一个Android的应用程序,本人接着上篇扼要地讲一下Android的程序结构.       在建立HelloAndroid程序的过程中,ADT插件会自动建立一些目录和文件,如下图所示 ...
  • 出现提示: 在eclipse中搜索.删除文件时,有时候会弹出错误对话框,错误摘录如下:Resource is out of sync with the file system......   问题分析: 这个问题是由 ...
  • 这是敏捷开发一千零一问系列的第九篇.(在这里提问,之一,之二,之三,问题总目录) 问题 总体架构设计在什么时机进行?是每个迭代做还是先做完再迭代? 这是少数几个被提到的技术问题.在两天的培训课程之后,最后剩下的纯的技 ...
  • 国家地理2008最佳野生动物图片之一个地球奖.加蓬的一个非法野味市场上,一只黑疣猴正被烧烤待售.     国家地理2008最佳野生动物图片之动物肖像奖.这是印度尼西亚苏拉威的黑冠短尾猿.     国家地理2008最佳 ...
  • 文章摘要: 多线程程序设计的概念早在六十年代就被提出,但直到八十年代中期,Unix系统中才引入多线程机制,如今,由于自身的许多优点,多线程编程已经得到了广泛的应用.本文我们将介绍在Linux下编写多进程和多线程程序的 ...
  • 近日,华为AscendP7再次凭借卓越的外观和出色的相机拍摄能力,斩获欧洲影音协会(EuropeanImagingandSoundAssociation,简称EISA)"015年度欧洲最佳消费者 ...
  • I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis of Algo ...