jquery 实现可编辑DIV

原创 2012年03月29日 22:08:31

给realprice开始的DIV绑定click事件.

$("div[id^='realprice']").live('click',function(){
   var divedit = $(this);
   if (divedit.children("input").length > 0) {
    return false;
   }
   var inputIns = $("<input type='text'/>");  //创建input 输入框
   var oldtext = $(this).html();        //保存原有的值
   inputIns.width(divedit.width()); //设置INPUT与DIV宽度一致
   inputIns.val(divedit.html()); //将本来单元格DIV内容copy到插入的文本框INPUT中
   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) {
     divedit.html($(this).val());         //设置新值
    }
    if (keycode == 27) {
     divedit.html(oldtext);         //返回旧值
    }
   }).blur( function (event) {
      if($(this).val() != oldtext && window.confirm('是否保存修改值!')){
          divedit.html($(this).val());
                }else{
                divedit.html(oldtext);
               }
          }
         );
  
  
  });

内容可编辑contenteditable

前言最近遇到一个问题:文本域的高度随输入内容的多少自适应,就像是这样的: 刚刚拿到这个问题,就想到用textarea来搞定,尝试了一下,虽然也搞定了,但总感觉有点麻烦。仔细思考一番,想到貌似h5...

让div可编辑,设置标签的可读可写属性

添加contenteditable属性让文本处于可编辑状态,这里可以编辑
  • ning0_o
  • ning0_o
  • 2016年03月16日 15:51
  • 1685

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

如何让DIV可编辑、可拖动

 转载自:http://blog.csdn.net/jcx5083761/article/details/11764861 1、可编辑:  contentEditable="true...

div可编辑状态设置

div,p标签等可以激活他们的可编辑状态 jQuery中 $("div").attr("contenteditable":"true");...
  • lovqc
  • lovqc
  • 2015年10月28日 16:57
  • 591

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

用DIV做文本编辑器

今天的主角是我们大家都非常熟知的元素div,它可以说是前端布局里的核心标签了。 在几年前DIV+CSS是前端工作者所必须掌握的核心能力。但是,今天的这个属性并不是热门属性, contenteditab...

js把div置灰不可用

弹出层背景灰色不可编辑 //弹出层背景灰色 function locking(objDiv){ document.getElementById('ly').style.display="block"...

jquery 实现可编辑div

html大致如下: how are you? Delete ...
  • xxm524
  • xxm524
  • 2015年08月08日 17:08
  • 1098

如何让div内可输入内容

在网上搜了一阵后,无果.随后在群里问了问,才知道div有一个 contentEditable(设置或获取表明用户是否可编辑对象内容的字符串。)属性.唉,看样有必要在回去看看html的内容了.代码:这里...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 实现可编辑DIV
举报原因:
原因补充:

(最多只允许输入30个字)