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);
               }
          }
         );
  
  
  });

jquery 实现可编辑div

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

td div等标签的可编辑属性

contentEditable="true"
  • hutao1101175783
  • hutao1101175783
  • 2013年11月24日 12:19
  • 1843

在可编辑div中插入文字或图片的问题解决思路

最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。 ...
  • ldl_xz
  • ldl_xz
  • 2016年05月31日 22:34
  • 1905

内容可编辑contenteditable

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

div可编辑状态设置

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

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

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

如何让DIV可编辑、可拖动示例代码

1、可编辑: 可编辑 设置contentEditable属性可以让div编程可编辑状态 2、可拖动: $('#move').draggable(); 使用jQuery ...
  • u011714480
  • u011714480
  • 2013年09月18日 16:10
  • 582

jQuery获取编辑状态的值

我们经常会用到datagrid的editor,这个编辑器提供了一些非常方便的方法,让我们灵活应用。例:我们在添加一行数据的时候想动态的改变这一行的某一个值,这时用editor是非常的方便的,我们可以获...
  • u012365843
  • u012365843
  • 2015年07月14日 11:17
  • 897

可编辑div的使用,实现类似textarea功能

可编辑的div代替textarea
  • qq_36637705
  • qq_36637705
  • 2017年07月14日 14:22
  • 584

双击div变成可编辑区的简单实现

双击时,实现用一个新建的input元素替换div,然后当input失去焦点时先把input的内容传给原来的div,并用该div重新替换input,代码如下   window.onload = fu...
  • chunqiuwei
  • chunqiuwei
  • 2012年11月08日 11:49
  • 6069
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 实现可编辑DIV
举报原因:
原因补充:

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