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 ...
一周排行
  • javaGUI解决闪屏问题可以通过继承JPanel来实现,特别简单,因为JPanel有已经实现的解决闪屏的方法   JFrame jfm=new JFrame();  this.setDoubleBuffered(t ...
  • 今天在研究以往的商城项目时,由于前台使用的是MVC3,在没有安装MVC3的插件时,提示未能加载项目,但是在安装过程中,又提示安装失败: 决定折腾一下->居然找到一篇以前别人写的神作,特此记录一下: 转自:htt ...
  • 前言做移动开发很定要碰到适配问题,过去android需要,现在ios也需要,今天来谈谈Android机型上一般适配问题该如何处理. 在Android适配的主要是因为众多的手机型号,尺寸分辨率大家都不统一,就目前已经出 ...
  • 导读:本文介绍病毒如何篡改superuser,使得用户只是允许病毒请求的一次root权限变成允许病毒永久使用root权限. 继续之前两篇文章写,如果路过的同学有疑问,请先看前两篇 有同学说,你的Fake.apk需要把 ...
  • 易网科技讯 4月26日消息,据国外媒体报道,为了在无线移动市场获得更多的市场份额,雅虎宣布同三星拓展合作关系,三星手机从5月份开始将能够提供雅虎的多种服务.
  • 问题描述,通过 DownloadManage 下载APK文件,点击广播栏无法安装,提示打开方式 浏览器,记事本,文档编辑器等,查找资料发现调用下载时,未指定mimeType,手机不能正确识别下载的文件,指定mimeT ...
  • 文|城宇<华尔街日报>发布了一份报告,该报告中囊括了美国.中国和欧洲地区的十几家创业公司.这些公司的共同特点是价值超过了十亿美金甚至更多,而涉及领域则从互联网IT到影视娱乐,从在线零售到创新能源,可谓无所 ...
  •  本人所了解有两种方案,可能还有其的方式,希望大家多多讨论! 基本思路:1. 域名支持泛解析,即是指:把A记录 *.域名.com  解析到服务器IP,服务器IIS中做绑定,绑定时主机头为空;2. 为了实现完全的二级域 ...
  • 一.为什么需要面向对象?生活中所有的东西都是一个个的对象,为了描述他们方便,我们就把它们使用面向对象的方式来解决. 二.什么是面向对象编程?根据具本的实际生活(业务),设计相对应的类或对象出来,按照生活中的流程或逻辑 ...
  • 今天小编为大家带来了跑跑卡丁车魔女扫把9怎么得_魔女扫把9特性介绍,感兴趣的朋友们可以跟着小编去下文了解一下哦. 跑跑卡丁车魔女扫把9怎么得? 跑跑卡丁车魔女扫把9属性介绍 如果大家想了解更多游戏活动与游戏攻略,请持 ...