javascript - jEditable字段值取消后如何格式化

我正在尝试使用“ onreset”选项，但是出现问题。我有一个字段，仅供用户输入10个数字。我想以电话格式显示10个数字，即。 [phone]。到目前为止，我可以执行此操作，并且文本为（310）490-1235时，该字段的HTML设置为3104901235，但是当用户取消或转到另一个字段时，当前字段将关闭并显示HTML（3104901235 ），而不是文本（310）490-1235。

我在“ onreset”选项中设置了一个功能来设置文本，但是它不适用。

//Phone field
// Set the fields 10 digits to phone format
set_phone();

function isNumeric(value) {
  if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
  return true;
}
$('.edit-phone').editable('<?php echo base_url(); ?>home_resume/builder/ajax_save_field', {
 onsubmit: function(settings, td) {
  rm_class();
      var input = $(td).find('input');
        var original = input.val().trim();
        if (isNumeric(original) && original.length == 10) {
          $('#notification-saved').miniNotification({opacity: 1.0});
            return true;
        } else {
          $('#notification-phone').miniNotification({opacity: 1.0});
            input.css('background-color','#c00').css('color','#fff');
            return false;
        }
    },
         type      : 'text',
         cancel    : 'Cancel',
         onreset : function(value, settings){
                    $(this).closest("li").removeClass("active");
                    // Since the HTML is now just 10 digits, set it back to phone format with
                    set_phone();
                  },
         style     : 'display: inline',
         select    : 'true',
         submit    : 'OK',
         event     : "edit-phone",
         indicator : '<img src="<?php echo base_url(); ?>themes/resume-builder/images/fb-indicator.gif">'
     });
$(".edit-phone-trigger").on("click", function() {
  strip_phone();
  $(this).closest("li").addClass('active');
  var edit_id = $(this).attr("id").split("-");
    $('#' + edit_id[1]).trigger("edit-phone");
    return false;
});

// Format the 10 digit phone number
function set_phone() {
    var num = $("#7").text();
    var num_1 = num.slice(0,3);
    var num_2 = num.slice(3,6);
    var num_3 = num.slice(6,11);
    var new_num = "("+num_1+") "+num_2+"-"+num_3;
    $("#7").text(new_num);
}

// Remove characters from phone number input
function strip_phone() {
  var pnum = $("#7").text();
  pnum = pnum.replace(/\(/g, "");
  pnum = pnum.replace(/\)/g, "");
  pnum = pnum.replace(/-/g, "");
  pnum = pnum.replace(/\s/g, "");
  $("#7").html(pnum);
}

最佳答案

您可以尝试使用data和callback选项来更改文本在输入中的显示方式，这样还可以避免使用自定义事件。

第一次单击该元素时将调用data，可在编辑前将其用于更改文本。在这里，您将电话剥离为仅显示在输入中的数字。

callback将在提交表单后运行。在这里，您将提交的内容格式化为电话号码，并更改原始元素的文本。 （内部函数this是指原始元素）

$('.edit-phone').editable('<?php echo base_url();?>home_resume/builder/ajax_save_field', {
    type      : 'text',
    cancel    : 'Cancel',
    style     : 'display: inline',
    select    : 'true',
    submit    : 'OK',
    event     : 'click',
    indicator : '<img src="<?php echo base_url(); ?>themes/resume-builder/images/fb-indicator.gif">',
    data      : function(value, settings) {
                    return strip_phone(value);
                },
    callback : function(value, settings){
                    $(this).text(set_phone(value));
                }
    onsubmit  : function(settings, td) {
                    rm_class();
                    var input = $(td).find('input');
                    var original = input.val().trim();
                    if (isNumeric(original) && original.length == 10) {
                        $('#notification-saved').miniNotification({opacity: 1.0});
                        return true;
                    } else {
                        $('#notification-phone').miniNotification({opacity: 1.0});
                        input.css('background-color','#c00').css('color','#fff');
                        return false;
                    }
                },
});

// Format the 10 digit phone number
function set_phone(text) {
    var num = text;
    var num_1 = num.slice(0,3);
    var num_2 = num.slice(3,6);
    var num_3 = num.slice(6,11);
    var new_num = "("+num_1+") "+num_2+"-"+num_3;
    return new_num;
}

// Remove characters from phone number input
function strip_phone(text) {
  var pnum = text;
  pnum = pnum.replace(/\(/g, "");
  pnum = pnum.replace(/\)/g, "");
  pnum = pnum.replace(/-/g, "");
  pnum = pnum.replace(/\s/g, "");
  return pnum;
}

请注意，我更新了set_phone()和strip_phone()函数以返回值，而不是直接将其设置为元素，以便可以动态调用它们