16

我试图研究这个问题的答案，但我迷路了。我正在尝试制作一个自动在电话号码中添加破折号的搜索栏。我已经解决了。

下一部分是具有挑战性的部分。我怎样才能让它总是做 XXX-XXX-XXXX，即使粘贴的字符是 555 555 1212 或 555---555-1212，它只会卷回数字并输出 55​​5-555-1212。它不应该将空格或额外的破折号算作一个字符。

我发现：http ://www.jotform.com/answers/15202-can-I-add-script-to-my-form-that-will-automatically-add-hyphens-in-between-the-3-digit -区号和三位数前缀

我通过添加以下内容对其进行了一些更改：

<SCRIPT LANGUAGE="JavaScript">
        function addDashes(f)
            {
                f.value = f.value.slice(0,3)+"-"+f.value.slice(3,6)+"-"+f.value.slice(6,15);
            }
    </SCRIPT>


<input id="input_4" class="form-textbox" maxlength="15" name="atn" size="25" onBlur='addDashes(this)' />

目前，这只有在用户输入 5555555555 并自动将其转换为 555-555-5555 时才有效。我试图弄清楚如何将 5-55555-5555 之类的东西变成 555-555-5555。目前，它是 5-5-555-5-5555。

看到我的困境了吗？哈哈。它不能是 php 或任何服务器端脚本，因为它必须能够在桌面上运行。

解析度：

<SCRIPT LANGUAGE="JavaScript">
        function addDashes(f)
            {
                f.value = f.value.replace(/\D/g, '');

                f.value = f.value.slice(0,3)+"-"+f.value.slice(3,6)+"-"+f.value.slice(6,15);
            }
    </SCRIPT>
4

6 回答 6

24

首先，通过删除所有不是数字的字符来清理您的输入（参考：Regex 以替换除数字和小数点以外的所有内容）

然后，你把你的破折号。

function addDashes(f)
{
    f_val = f.value.replace(/\D[^\.]/g, "");
    f.value = f_val.slice(0,3)+"-"+f_val.slice(3,6)+"-"+f_val.slice(6);
}
于 2012-10-26T19:32:10.767 回答
8

我强烈倾向于将电话号码视为 10 位数字的直字符串，没有格式（因此我可以根据需要即时对它们应用格式，因此搜索和比较更简单），尽管如果我这样做可能会改变永远不得不处理国际电话号码。如果您要处理的只是美国电话号码，这将很好地工作（在键入时对其进行格式化）：

function addDashes(f) {
    var r = /(\D+)/g,
        npa = '',
        nxx = '',
        last4 = '';
    f.value = f.value.replace(r, '');
    npa = f.value.substr(0, 3);
    nxx = f.value.substr(3, 3);
    last4 = f.value.substr(6, 4);
    f.value = npa + '-' + nxx + '-' + last4;
}​

这是一个小提琴：http: //jsfiddle.net/EYuk5/

于 2012-10-26T19:39:04.570 回答
0

这是一个小提琴：https ://jsfiddle.net/v9gq5jkw/ 。

<input id="phone">

function phone_formatting(ele, restore) {
  var new_number,
    selection_start = ele.selectionStart,
    selection_end = ele.selectionEnd,
    number = ele.value.replace(/\D/g, '');

  if (number.length > 2) {
    new_number = number.substring(0, 3) + '-';
    if (number.length === 4 || number.length === 5) {
      new_number += number.substr(3);
    } else if (number.length > 5) {
      new_number += number.substring(3, 6) + '-';
    }
    if (number.length > 6) {
      new_number += number.substring(6);
    }
  } else {
    new_number = number;
  }

  ele.value = (new_number.length > 12) ? new_number.substring(0, 12) : new_number;

  if (new_number.slice(-1) === '-' && restore === false &&
    (new_number.length === 8 && selection_end === 7) ||
    (new_number.length === 4 && selection_end === 3)) {
    selection_start = new_number.length;
    selection_end = new_number.length;
  } else if (restore === 'revert') {
    selection_start--;
    selection_end--;
  }
  ele.setSelectionRange(selection_start, selection_end);

}

function phone_number_check(field, e) {
  var key_code = e.keyCode,
    key_string = String.fromCharCode(key_code),
    press_delete = false,
    dash_key = 189,
    delete_key = [8, 46],
    direction_key = [33, 34, 35, 36, 37, 38, 39, 40],
    selection_end = field.selectionEnd;

  if (delete_key.indexOf(key_code) > -1) {
    press_delete = true;
  }

  if (key_string.match(/^\d+$/) || press_delete) {
    phone_formatting(field, press_delete);
  } else if (direction_key.indexOf(key_code) > -1) {} else if (dash_key === key_code) {
    if (selection_end === field.value.length) {
      field.value = field.value.slice(0, -1)
    } else {
      field.value = field.value.substring(0, (selection_end - 1)) + field.value.substr(selection_end)
      field.selectionEnd = selection_end - 1;
    }
  } else {
    e.preventDefault();
    phone_formatting(field, 'revert');
  }

}

document.getElementById('phone').onkeyup = function(e) {
  phone_number_check(this, e);
}
于 2021-09-11T21:41:47.283 回答
0

我做了这个

function addDashesToNumber(number){
    const numWithoutDashes = number.replace(/[^0-9]/g, '')
    if(numWithoutDashes.length > 10) return number.slice(0, -1)
    const dashPlaces = [3, 6]
    return numWithoutDashes
                .split('')
                .reduce((acc, curr, i) => dashPlaces.includes(i) ? [...acc, '-', curr] : [...acc, curr], [])
                .join('')
}
于 2021-06-16T15:12:21.590 回答
0

尝试这个：

  function dashedNumber(value){
    const afterIndices = [3,6,8]; 
    const length = value.length;
    let newValue = '' 
    for(let i=0; i<length; i++){
      if(afterIndices.includes(i))
        newValue+='-'
      newValue+=value[i];
    }
    return newValue;
  }
于 2020-07-04T11:30:40.337 回答
-2

除了添加破折号之外，您还需要处理光标的位置，尤其是在删除的情况下。

这个 AMD 模块正是这样做的：https ://github.com/whenyoubelieve2014/us-telephone-input

于 2015-02-23T19:06:40.503 回答