教你使用把div层变成可编辑的状态，非常简单粗暴有效

最新推荐文章于 2024-06-05 09:48:59 发布

张华勋

最新推荐文章于 2024-06-05 09:48:59 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css div 文章标签： div function input class jquery html

本文链接：https://blog.youkuaiyun.com/zhanghuaxun007/article/details/7938898

css div 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的网页元素可编辑插件。该插件允许用户直接在网页上编辑指定的HTML内容区域，并通过简单的交互操作完成内容的修改与保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在你的html页面上添加

<div class="content">where you are?</div>

下面是实现的jquery代码

$("div[class='content']").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);
                 }
            }
           );
      });