js 可编辑并用ajax保存的a标签仿input功能代码,测试ff/ie

================主要代码=========

/*
 * 生成可编辑对象
 * 双击保存
 * obj对象可用属性如下,非内部属性将全部做为可编辑对象属性
 * save:双击时调用的处理方法,只有编辑内容做为参数,this得到编辑对象,这样就能访问对象属性,返回字符串表示输入出错提示内容,且恢复初值,返回false表示自己处理,返回
 *      一个{url:提交地址(必须),method:get/post, element:提示框附着对象, data:{名字:提交值(必须)}}表示正确可以提交,默认:htmlInputerSave
 * text:初始值
 * html : 0立刻生成(默认),1返回对象html
 * tip:提示方法,默认使用element_div_tip
 * post:提交方法,默认ajax_edit_save
 * title:提示文字
 * clas:指定类,默认htmlInputer
 */
function htmlInputer(obj){
    if (! obj) return;
    if (! obj.text) obj.text = ' ';
    if (/^\s*$/.test(obj.text) ) {
        obj.text = obj.text.replace(' ', ' ');
    }
    
    if (! obj.clas) obj.clas = 'htmlInputer';
    if (! obj.title) obj.title = '可编辑对象使用方法:点击对象可编辑,双击对象把当前值保存';
    if (! obj.save && (typeof(htmlInputerSave) == 'function')) {
        obj.save = htmlInputerSave;
    } else {
        return alert("请指定处理值方法");
    }
    
    if (! obj.tip && (typeof(element_div_tip) == 'function') ) {
        obj.tip = element_div_tip;
    } else {
        return alert("请指定提示方法");
    }
    
    if (! obj.post && (typeof(ajax_edit_save) == 'function')) {
        obj.post = ajax_edit_save;
    } else {
        return alert("请指定提交方法");
    }
    
    var editerText = function(obj, text) {
        if (undefined == text) {
            return obj.innerText != undefined ? obj.innerText : obj.textContent;
        } else {
            if (obj.innerText != undefined) {
                obj.innerText = text;
            } else {
                obj.textContent = text;
            }
        }
    };

    var span = '<a href="#1" class="' + obj.clas + '" ';
        
    for (var tmp in obj) {//把非内部属性全部附加到a中
        switch (tmp) {
            case 'text':
            case 'save':
            case 'tip':
            case 'post':
            case 'title':
            case 'html':
            case 'clas':
                continue;
                break;
            default:
                span += tmp + '="' + obj[tmp] + '" ';
        }
    }
    
    span += ' onfocus="window.htmlInputerFocus(this);" ';
    window.htmlInputerFocus = function (el){//单击编辑          
          el.setAttribute('CONTENTEDITABLE', "true" );//因为firefox在多个可编辑时,向前删除时,会把没选中的可编辑区也删除,所以选中时才能编辑
          el.contentEditable = true;//ie 必须
          el.style.border = '1px solid black';
          el.style.padding = '5px';
    };     
    
    span += ' ondblclick="window.htmlInputerDbclick(this);" ';
    window.htmlInputerDbclick = function (el){   //双击保存           
          var reObj = obj.save.call(el, editerText(el));

          if (typeof(reObj) == 'string') {//返回字符串,表示需要提示出错
                return obj.tip(el, reObj);                    
          }else if (reObj === false) {//自己处理出错
                return;
          }else if (reObj && reObj.url) {  
            if (! reObj.element) {
                reObj.element = el;
            }

            obj.tip(reObj.element, '处理中...请稍候');            
            obj.post.call(el, reObj);
          }else {
             obj.tip(el, '请返回正确的对象');
          }
    };    
    
    span += ' onblur="window.htmlInputerBlur(this)" ';
    window.htmlInputerBlur = function (el){//失去焦点还原
          if (/^[\r\n]*$/.test(el.innerHTML)) {
                el.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;";                
          }
          
          el.removeAttribute('contenteditable');//删除可编辑属性
          el.contentEditable = false;
          el.style.border = '0px solid black';
          el.style.padding = '0px';            
    };
    
    span += ' title="' + obj.title + '">' + obj.text + '</a>';
    
    if (obj.html) { //返回html
        return span;
    } else {
        document.write(span);
    }
}
==========================配合代码============

/*使用ajax保存*/

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><div>' + tip + '</div></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" onclick="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);
}
//<<<

 

 

===========调用方式========

        <script>htmlInputer({ db_id:{$list['id']}, text:'". str_replace("'", "\\'", $list['name']) ."' });</script>

/*默认名字的处理方法*/
function htmlInputerSave(text){
  if ( /^\s*$/.test(text) ){
    return ('请输入名称');
  }
 
  return {
    url : site_url + 'index.php/home/email/groupEdited'
    ,data : {
        id : $(this).attr('db_id')
        ,name :text
    }
  };
}

 

 

效果图