0

我正在使用此功能进行电话屏蔽,并且几乎可以完美运行。

function mask(o, f) 
{ 
    v_obj = o; 
    v_fun = f; 
    setTimeout("execmask()", 1) 
};

function execmask() 
{ 
    v_obj.value = v_fun(v_obj.value) 
};

function mphone(v){
    v=v.replace(/\D/g,"");           
    v=v.substring(0, 11);
    v=v.replace(/^(\d{2})(\d)/g,"(OXX$1) $2"); 
    v=v.replace(/(\d)(\d{4})$/,"$1-$2"); 
    return v;
}

在这里,我在文本字段中运行掩码:

<input type="text" id="phone" name="phone" onkeypress="mask(this, mphone);" onblur="mask(this, mphone);" />

问题是我需要将这部分代码更改(OXX$1)(0XX$1).

现在的情况:

位数 输入字段
9位 (OXX99) 99999-9999
8位 (OXX99) 9999-9999

我需要的正确格式:

位数 输入字段
9位 (0XX99) 99999-9999
8位 (0XX99) 9999-9999

8位或9位的数量是用户的选择。

更改O0, 会导致掩码出错。

4

4 回答 4

10
function mask(o, f) {
    setTimeout(function () {
        var v = f(o.value);
        if (v != o.value) {
            o.value = v;
        }
    }, 1);
}

function mphone(v) {
    var r = v.replace(/\D/g,"");
    r = r.replace(/^0/,"");
    if (r.length > 10) {
        // 11+ digits. Format as 5+4.
        r = r.replace(/^(\d\d)(\d{5})(\d{4}).*/,"(0XX$1) $2-$3");
    }
    else if (r.length > 5) {
        // 6..10 digits. Format as 4+4
        r = r.replace(/^(\d\d)(\d{4})(\d{0,4}).*/,"(0XX$1) $2-$3");
    }
    else if (r.length > 2) {
        // 3..5 digits. Add (0XX..)
        r = r.replace(/^(\d\d)(\d{0,5})/,"(0XX$1) $2");
    }
    else {
        // 0..2 digits. Just add (0XX
        r = r.replace(/^(\d*)/, "(0XX$1");
    }
    return r;
}

http://jsfiddle.net/BBeWN/

于 2013-04-04T05:15:23.500 回答
0

我做了一些改变:

  1. 我将事件更改为 keyup (除了 keypress 已被弃用的事实),因为 keypress 总是采用少一个字符的字符串,并且工作我还需要 onblur,这是 keyup 不会发生的事情。需要调整代码来解决这个问题
  2. 以及“-”的问题,当试图用退格键删除它时,它总是会回来。

小提琴

  function mascaraFone(event) {
    var valor = document.getElementById("telefone").attributes[0].ownerElement['value'];
    var retorno = valor.replace(/\D/g, "");
    retorno = retorno.replace(/^0/, "");
    if (retorno.length > 10) {
      retorno = retorno.replace(/^(\d\d)(\d{5})(\d{4}).*/, "($1) $2-$3");
    } else if (retorno.length > 5) {
      if (retorno.length == 6 && event.code == "Backspace") { 
        // necessário pois senão o "-" fica sempre voltando ao dar backspace
        return; 
      } 
      retorno = retorno.replace(/^(\d\d)(\d{4})(\d{0,4}).*/, "($1) $2-$3");
    } else if (retorno.length > 2) {
      retorno = retorno.replace(/^(\d\d)(\d{0,5})/, "($1) $2");
    } else {
      if (retorno.length != 0) {
        retorno = retorno.replace(/^(\d*)/, "($1");
      }
    }
    document.getElementById("telefone").attributes[0].ownerElement['value'] = retorno;
  }
<input id="telefone" onkeyup="mascaraFone(event)" />

于 2021-09-24T16:48:39.973 回答
0

在这个沙盒项目中,可以看到以下方法的使用,在输入中应用它们:https ://codesandbox.io/s/epic-darwin-obj8dp

正则表达式掩码:


// 10.000,00
const maskMoney = (event) => {
  const { value } = event.currentTarget;
  return value
    .replace(/\D/g, '')
    .replace(/(\d)(\d{2})$/, '$1,$2')
    .replace(/(?=(\d{3})+(\D))\B/g, '.');
};

// 000.000.000-00
const maskCPF = (event) => {
  event.currentTarget.maxLength = 15;
  const { value } = event.currentTarget;

  return value
    .replace(/\D/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d{1,2})/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1');
};

// 00.000.000/0000-000
const maskCNPJ = (event) => {
  event.currentTarget.maxLength = 18;
  const { value } = event.currentTarget;
  return value
    .replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1/$2')
    .replace(/(\d{4})(\d{2})/, '$1-$2');
};

// 000.000.000-00 or 00.000.000/0000-000
const maskCPFOrCNPJ = (event) => {
  event.currentTarget.maxLength = 18;
  const { value } = event.currentTarget;
  if (value.length >= 15) {
    return maskCNPJ(event);
  }
  return maskCPF(event);
};

// (00) 00000-0000
const maskPhone = (event) => {
  event.currentTarget.maxLength = 15;
  const { value } = event.currentTarget;
  return value
    .replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{5})(\d{4})/, '$1-$2');
};

// (00) 0000-0000
const maskLandlineTelephone = (
  event,
) => {
  event.currentTarget.maxLength = 14;
  const { value } = event.currentTarget;
  return value
    .replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{4})(\d{4})/, '$1-$2');
};

// 00000-000
const maskCEP = (event) => {
  event.currentTarget.maxLength = 9;
  const { value } = event.currentTarget;
  return value.replace(/\D/g, '').replace(/^(\d{5})(\d{3})+?$/, '$1-$2');
};

// 00/00/0000
const maskDate = (event) => {
  event.currentTarget.maxLength = 10;
  const { value } = event.currentTarget;
  return value
    .replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '$1/$2')
    .replace(/(\d{2})(\d)/, '$1/$2')
    .replace(/(\d{4})(\d)/, '$1');
};

const maskOnlyLetters = (event) => {
  const { value } = event.currentTarget;
  return value.replace(/[0-9!@#¨$%^&*)(+=._-]+/g, '');
};

const maskOnlyNumbers = (event) => {
  const { value } = event.currentTarget;
  return value.replace(/\D/g, '');
};

于 2022-03-03T02:50:07.973 回答
-4

我喜欢这个功能,我一直在使用它。如果有人需要,我已经添加了另外 2 个面具。我知道他们不会直接回答这个问题,但它们非常有用。

//Social Security Number for USA
 function mssn(v) {
    var r = v.replace(/\D/g,"");
    r = r.replace(/^0/,"");
    if (r.length > 9) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
        return r;
    }
    else if (r.length > 4) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
    }
    else if (r.length > 2) {
        r = r.replace(/^(\d\d\d)(\d{0,3})/,"$1-$2");
    }
    else {
        r = r.replace(/^(\d*)/, "$1");
    }
    return r;
}

//USA date
function mdate(v) {
   var r = v.replace(/\D/g,"");
   if (r.length > 4) {
    r = r.replace(/^(\d\d)(\d{2})(\d{0,4}).*/,"$1/$2/$3");
   }
   else if (r.length > 2) {
    r = r.replace(/^(\d\d)(\d{0,2})/,"$1/$2");
   }
   else if (r.length > 0){
         if (r > 12) {
           r = "";
         }
   }
   return r;
}
于 2017-01-17T18:30:49.483 回答