直接在页面中编辑元素且保存的方法

最新推荐文章于 2022-06-21 10:43:43 发布

qidizi

最新推荐文章于 2022-06-21 10:43:43 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qidizi/article/details/8790377

版权

js 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

直接在页面中编辑元素且保存的方法 - qidizi - qidizi 的博客

要求

----

载入jquery.js

被编辑元素写法

---------------

--------

绑定编辑事件

-------

$(document).ready(
function (){
    ajax_edit_bind('.edit_a', save_edit);
}
);

function save_edit(el){
var txt = $(el).text();

if (isNaN(txt)){
    element_div_tip(el, '请输入数字');
    return 0;
}

if (txt < 0){
    element_div_tip(el, '请输入大于0数字');
    return 0;
}

var obj = {};
obj.url = 'music.php';
obj.element = el;

obj.data = {};
obj.data.action = 'edit_hit';
obj.data.id = $(el).attr('db_id');
obj.data.value = txt;

ajax_edit_save(obj);
}

-----------------

公用func

----------

-----------

php需要处理

在接收到中文时必须要

$name = urldecode($name);

如果代码保存时使用gb2312时还要把上面utf8用iconv转成gb2312才正常;

-------------------------

2011-08-26修改:

1 .当修改区获得焦点时,记录当时编辑区的值,当清空编辑区数据成空白后(包括换行),失去焦点时,这样会导致因为a标签的text没有数据而编辑不可见,现在增加一判断,如果编辑区为空时,失去焦点后,自动恢复到获得焦点时的数据;

2. firefox下面,如果有一标签a1在排版位置的前面,a2在排版位置的相对a1的后面,a1/a2同时打开可编辑属性时,在a2中进行删除时,一直按住删除键不放,就会也同时把a1编辑区的内容删除掉,在ie中却不会出现这种问题,看来在firefox中,删除对于可编辑区来说,会有tab的功能作用,所以现在修改成,只有选中时,才开启可编辑状态;失去焦点后移除编辑属性

//>>>ajax 保存类

function ajax_edit_bind(e_class, save_edit_fun){
      $(e_class).focus(//单击编辑
          function (){
              $(this).attr('bakText', $(this).text() );//记忆首次焦点状态
              $(this).attr('contenteditable', "true" );//因为firefox在多个可编辑时,向前删除时,会把没选中的可编辑区也删除,所以选中时才能编辑

              $(this).css('border', '1px solid black');
              $(this).css('padding', '5px');
              $(this).css('display', 'block');
          }
      );

      $(e_class).dblclick(//双击保存
          function (){
              save_edit_fun(this);
              element_div_tip(this, '处理中...请稍候');
          }
      );

      $(e_class).blur(//失去焦点还原
          function (){
              if (/^\s*$/.test($(this).text()) ) $(this).text($(this).attr('bakText'));//还原最后一次非空
              $(this).removeAttr('contenteditable');//删除可编辑属性
              $(this).css('border', '0px solid black');
              $(this).css('padding', '0px');
              $(this).css('display', '');
          }
      );
}

function ajax_edit_save(obj){
for (var data in obj.data){
    obj.data[data] = encodeURIComponent(obj.data[data]);
}

$.ajax({
        element:obj.element,
        url:obj.url,
        type:"POST",
        cache :false,
        dataType:'html',
        data:obj.data,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success:function (data){
            element_div_tip(this.element, data);
        },
        error:function (event, XMLHttpRequest, ajaxOptions, thrownError){ element_div_tip(this.element, 'ajax出错了:' + XMLHttpRequest);}
});
}

function element_div_tip(element, tip, option){
            if (!element){//隐藏
              if (!$('#ajax_div_tip').length){
                  $('#ajax_div_tip').css('display', 'none');
              }

                  return 0;
            }

            tip = '<div><header style="display:block; padding-bottom:5px; margin-bottom:10px;text-align:center;">点此关闭</header><span>' + tip + '</span></div>';

            if (!$('#ajax_div_tip').length){
              var div_html = '<div style="position: absolute;z-index:9999;background:InfoBackground; border:1px solid black; padding:3px;" ' +
                              ' class="ajax_div_tip" id="ajax_div_tip" οnclick="this.style.display=\'none\';" >' + tip + '</div>';
              $('body').append(div_html);
            }else{
              $('#ajax_div_tip').css('display', 'block')
                                .html(tip);
            }

            $('#ajax_div_tip').css('top', $(element).offset().top + $(element).height() + parseInt($(element).css('padding-top')) + parseInt($(element).css('padding-bottom')) + 5)
                              .css('left', $(element).offset().left);
}
//<<<

qidizi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
直接在页面中编辑元素且保存的方法

要求----载入jquery.js 被编辑元素写法 --------------- {$list.hit}--------绑定编辑事件-------$(document).ready( function (){ ajax_edit_bind('.edit_a', save_edit); });function save_edit(el){ var txt = $(el).
复制链接

扫一扫

专栏目录