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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

如何让DIV可编辑、可拖动

1、可编辑:  contentEditable="true">可编辑 设置contentEditable属性可以让div编程可编辑状态 2、可拖动: $('#move').draggable(...

用DIV做文本编辑器

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

jquery 实现可编辑div

html大致如下: how are you? Delete ...

jQuery(4)--实现用户的添加,删除,编辑功能

页面如下:   源码如下: user.js $(document).ready(function() { // 添加的操作 $("#addUser").bind("click...

Jquery实现行内编辑

做项目的时候,UI封装了好了一个行内编辑,当时用起来的时候觉得高大上啊,好奇是怎么实现的,现在研究了一下,了解到了,其实行内编辑就是做了点小动作,让用户觉得点击这行的时候就可以对这行的内容进行编辑,点...

你不知道的input[type=search]

input[type=search]简介html5对表单元素做了一些增强,其中对input元素,我们可以指定更多的属性来控制它,如required,autofocus,maxlength等,具体有做了...

window.history, window.location

#的含义#代表网页中的一个位置。其后面的字符,就是该位置的标识符。比如https://www.baidu.com/index.html#bottom_container就代表网页index.html的...

内容可编辑contenteditable

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

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

添加contenteditable属性让文本处于可编辑状态,这里可以编辑
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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