个人中心
gpt4 book ai didi

javascript - 自动在电话号码中添加连字符，例如 111-111-1111

转载 作者：行者123 更新时间：2023-12-01 00:56:42 24 4
gpt4 key购买 nike

我想在用户输入号码时在电话号码中添加连字符。

电话格式应类似于 111-111-1111。

我已经编写了代码，但无法生成模式。

我们将非常感谢您的一点帮助。

<html>
<head>
    <title>Add Hyphen to a text using JavaScript</title>
</head>

<body>
    <p>Type some values (numbers or text) in the text box. 
        The script will automatically add a "hyphen" (-) after every 3rd character.</p>
    <p>The onkeyup event calls a JavaScript fuction after you release the key in text box.</p>
    
    <div>
        <input type="text" id="tbNum" onkeyup="addHyphen(this)"
            placeholder="Type some values here" maxLength="12"/>
    </div>
</body>

<script>
	function addHyphen (element) {
    	let ele = document.getElementById(element.id);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.match(/.{1,4}/g).join('-');
        document.getElementById(element.id).value = finalVal;
    }
</script>
</html>

最佳答案

这相当困惑，但您可以使用正则表达式并替换来做到这一点:

console.log('1111111111'.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10'))

此代码片段捕获每个数字，然后使用 '$n'查找第 n 个数字并插入 '-'在适当的地方。

请注意，您不能使用 /(\d){10}/或/\d{10}/因为每个数字都需要被捕获。

所有考虑的事情(如评论中提到的)<input type="tel"/>可能是最好的方法。

完整片段:

<html>
<head>
    <title>Add Hyphen to a text using JavaScript</title>
</head>

<body>
    <p>Type some values (numbers or text) in the text box. 
        The script will automatically add a "hyphen" (-) after every 3rd character.</p>
    <p>The onkeyup event calls a JavaScript fuction after you release the key in text box.</p>
    
    <div>
        <input type="text" id="tbNum" onkeyup="addHyphen(this)"
            placeholder="Type some values here" maxLength="10"/>
    </div>
</body>

<script>
	function addHyphen (element) {
    	let ele = document.getElementById(element.id);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10')
        document.getElementById(element.id).value = finalVal;
    }
</script>
</html>

此外，由于正则表达式的性质，只有当文本中的数字数量正确时才会添加连字符。如果您只想每三个数字添加连字符，而不仅仅是在数字数量正确时添加，请更改此:

ele.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10')

对此:

ele.replace(/(\d)(\d)(\d)(?!$)/g, '$1$2$3-')

最后一点:您可以重构上面评论中提到的一些内容(尽管这可能会稍微降低代码的可读性)，即更改此内容:

function addHyphen (element) {
        let ele = document.getElementById(element.id);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10')
        document.getElementById(element.id).value = finalVal;

对此:

const addHyphen = element => element.value = element.value.replace(/([^\d])/g, '').replace(/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\d)/, '$1$2$3-$4$5$6-$7$8$9$10');

关于javascript - 自动在电话号码中添加连字符，例如 111-111-1111，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56516668/

24 4 0
文章推荐： javascript - 如何输出 javascript 函数在网页下拉菜单中选择的次数？
文章推荐： python - 赋值运算符的 LHS 上使用了关键字 'str'
文章推荐： python - dask 在运行函数之前是否等待资源可用？
文章推荐： javascript - 如何在数字组之间设置 math.random
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com