在输入掩码的 15 个字符后插入 X答案

【问题标题】：Insert X after 15 character in input mask在输入掩码的 15 个字符后插入 X
【发布时间】：2023-03-11 16:30:02
【问题描述】：

(XXX) XXX-XXXX xXXXX

我想在输入的每 15 个字符后插入一个 X 符号。我有一个商务电话输入框。当用户输入并达到每 15 个字符时，jQuery 将插入一个连字符 (X)。

例如：(999) 999-9999 x9999

我正在尝试一些代码，我认为我非常接近正确的代码，但我遇到了一些问题。这是我的代码示例；

$(document).delegate('#businessPhone', 'keyup', function(e) {
        var Textlength = $(this).val();
console.log(Textlength.length);
        if (Textlength.length >= 14) {
            //alert("if"+Textlength.length);
            $("#businessPhone").mask("(999) 999-9999 x9999");
return false;
        } else {
            //alert("else"+Textlength.length);
$("#businessPhone").mask("(999) 999-9999");
        }
    });

如果用户完成输入所有字符，代码可以正常工作。

但问题是如果字符长度达到 14，用户想要删除字符没有删除的字符。

【问题讨论】：

在控制台中我得到TypeError: $(...).mask is not a function 你为.mask() 函数包含了什么库？
参考http://jsfiddle.net/mykisscool/VpNMA/
@sachin-k 如果在html中将maxLength设置为14，那么这里的问题就不会碰了吧？因为他想在每 15 个字符后加一个 X
你试过放一个吗？在掩码字符串的开头。 “（999）999-9999？x9999”。你也可以提供一个小提琴吗？
只需删除 html 中的“maxlength”属性并在该 jsfiddle 示例中的 if 条件中添加 if ($phone.val().length === 15) { $phone.val($phone.val() + ' x'); } 条件

标签： javascript jquery

【解决方案1】：

试试这个

$('#phone-number', '#example-form')

	.keydown(function (e) {
		var key = e.charCode || e.keyCode || 0;
		$phone = $(this);

		// Auto-format- do not expose the mask as the user begins to type
		if (key !== 8 && key !== 9) {
			if ($phone.val().length === 4) {
				$phone.val($phone.val() + ')');
			}
			if ($phone.val().length === 5) {
				$phone.val($phone.val() + ' ');
			}			
			if ($phone.val().length === 9) {
				$phone.val($phone.val() + '-');
			}
            if ($phone.val().length === 15) {
				$phone.val($phone.val() + ' x');
			}
		}

		// Allow numeric (and tab, backspace, delete) keys only
		return (key == 8 || 
				key == 9 ||
				key == 46 ||
				(key >= 48 && key <= 57) ||
				(key >= 96 && key <= 105));	
	})
	
	.bind('focus click', function () {
		$phone = $(this);
		
		if ($phone.val().length === 0) {
			$phone.val('(');
		}
		else {
			var val = $phone.val();
			$phone.val('').val(val); // Ensure cursor remains at the end
		}
	})
	
	.blur(function () {
		$phone = $(this);
		
		if ($phone.val() === '(') {
			$phone.val('');
		}
	});

<form id="example-form" name="my-form">
    <label>Phone number:</label><br />
    <!-- I used an input type of text here so browsers like Chrome do not display the spin box -->
    <input id="phone-number" name="phone-number" type="text"  placeholder="(XXX) XXX-XXXX" /><br /><br />
    <input type="button" value="Submit" />
</form>

【讨论】：