1

我正在尝试使用“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);
}
4

1 回答 1

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

于 2013-08-14T05:49:25.597 回答