Question

我正在尝试使用“onreset”选项，但我遇到了问题。我有一个字段，用户只能输入10个数字。我希望以电话格式显示10个数字，即。（310）490-1235。到目前为止我可以这样做，并且字段的HTML设置为3104901235，而文本是（310）490-1235，但是当用户取消或转到另一个字段时，当前字段关闭，并显示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);
}

Answer 1

您可以尝试使用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()函数以返回值，而不是直接将其设置为元素，以便可以动态调用它们

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

1 个答案: