关闭

jquery 实现可编辑DIV

标签: jqueryfunctioninputdiv
4100人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:407484次
    • 积分:5343
    • 等级:
    • 排名:第5037名
    • 原创:154篇
    • 转载:106篇
    • 译文:0篇
    • 评论:45条
    文章分类
    最新评论