自动添加字符的html文本框

Question

大家好，我正在尝试制作一个 HTML 文本框： 1) 只接受数字 2) 3 位数字后添加“.” 3) 在 6 位数字后，再添加一个“.”

例如，只需输入数字，您就会得到 555.323.7637

4) 如果您在“.”之后，例如“555.”，则退格键会将其更改为“55”。

我一直在谷歌上搜索，但不知道我要找的确切术语。

谢谢！

Answer 1

查看 MeioMask http://www.meiocodigo.com/ 它是一个 JQuery 插件，可以完成大部分功能你在追随。

Answer 2

这似乎是一种烦人的用户体验，但如果您坚持的话，您可以使用 onkeyup/onkeydown/onkeypress 侦听器（onkeyup 可能就足够了）。

如果您是用户 1) 了解格式，或 2) 该格式对于实际使用并不重要，则 1) 让他们格式化，或 2) 收到后格式化。

Answer 3

尝试改变输入字段的工作方式是危险的领域。 通过使用一系列事件处理程序来侦听按键操作，您可能可以使其在 95% 的时间内正常工作。 另外百分之五的时间你的用户会咒骂你的名字。 考虑一下那些将复制并粘贴到文本框中的人（可能很多，因为它是 9 位数字？）。 我确信还有很多其他情况下正常事件不会按预期触发。

这是另一种可能有效的方法：当用户键入输入后输入模糊（即失去焦点）时，然后将屏蔽和格式应用于元素。 如果它再次获得焦点，则删除多余的标点符号，以便用户可以只处理数字。 例如：

1: user enters numbers, it will look like this:
________________
| 123456789    |
________________

2: user moves to the next input, it will change to this:
________________
| 123.456.789  |
________________

3: user comes back to the element, it changes to:
________________
| 123456789    |
________________

Answer 4

您想要做的可能涉及 Javascript 作用于相关文本字段的 onKey___ 事件，以验证和（如果必要）修改该字段的值。

为了修改退格键的行为，您可能还需要使用 onKeyDown 事件来考虑字段的内容。

另一个答案中提到的另一种选择是简单地使用 3 个单独的文本框 - 您可以使用 Javascript 使光标在每个文本框填满后自动“跳转”到下一个框，这是电话号码等内容的相当标准的解决方案输入。

Answer 5

您可以使用 Stack Overflow 在“您的答案”文本框中使用的相同方法。

您可以让用户在文本框中输入文本（仅使用 REGEX 验证数字字符），然后显示格式化的文本下面的文本，在另一个带有 onkeypress JavaScript 事件 http://www.w3schools.com/tags/att_input_readonly.asp" rel="nofollow noreferrer">只读属性，因此用户无法更改文本。

谢谢

Answer 6

我以前尝试过这样做，但无法让它完全按照我想要的方式工作。 我发现捕获“keypress”事件（或者更好的是“keyup”事件）并重写该事件的字段值相当不错。 （这是大多数“屏蔽”库所做的，其他人已经发布了示例代码。）我将在这里重述的是我使用这种方法时遇到的问题：

（1）很难管理使用光标的人的问题键在字段中来回移动。 有关于如何以跨平台方式捕获光标键的注释，但它有点棘手。

(2) 处理删除键的按下更加痛苦（特别是因为他们可以将光标或单击到字段中的任何位置）。 当他们点击删除时仅仅删除光标之前的字符并不是一个好的用户体验：你会遇到人们无法删除内容的情况！ 想象一下他们输入“123.4”，然后连续点击删除 6 次。 第一个删除删除“4”（到目前为止还不错），下一个删除删除“.”。 现在，您的格式规则会看到“123”，并且会添加“123”的小数点。 用户可以随意点击删除，它不会去任何地方！ 我们通过删除删除前一个重要字符（您的情况下的数字）而不是前一个字符来解决此问题。

(3) 处理浆糊是我们从未解决过的问题。 通过“ctrl-v”粘贴会生成一个可以在不同平台上捕获的关键事件，但通过编辑菜单粘贴无法跨平台一致地捕获。 最终我们就放弃了。

我希望这些经验能有所帮助。 我很想分享我的代码，但不幸的是这是为了工作而我不被允许这样做。

Answer 7

HTML：

<textarea id="messageBox"></textarea>

JavaScript (JQuery)：

$(document).ready(function() {
    var num_of_digits = 0;
    var textarea = $("#messageBox");
    textarea.keydown(
        function(e){
            var key = e.charCode || e.keyCode || 0;
            if (
                (key >= 48 && key <= 57)
                || (key >= 96 && key <= 105) 
               ) { // Number pressed (top row and numpad)
                if (num_of_digits++ % 3 == 0 && num_of_digits != 1) {
                    // Insert a period into the back
                    textarea.val(textarea.val() + '.');
                }
            } else {
                // non-number pressed
                if (key == 8) { // backspace
                    var last_char = textarea.val().slice(-1);
                    if (last_char == '.') {
                        textarea.val(textarea.val().slice(0, -1));
                    }
                    num_of_digits--;
                } else if (key == 46) { // delete key
                    // delete logic in here
                } else if (key >= 37 && key <= 40) { // arrow keys
                    // pass
                } else {
                    e.preventDefault();
                }
            }
        }
    );
});

这是快速编写的，没有经过测试，所以 YMMV 但这就是你可以做到的。

编辑：它似乎做你想做的事。 耸耸肩
除了数字之外，它不允许使用任何其他键（不允许退格键、空格、回车键、home/end 等）。 如果您需要它来做到这一点，请将其添加到您的问题中，以便我可以修改我的答案。

编辑2：退格键现在的工作方式如OP问题中所述。 删除有点棘手，留给OP作为练习。