2

嘿伙计们，我正在尝试制作一个 HTML 文本框：1）只接受数字 2）在 3 位数字之后，添加一个“。” 3) 在 6 位数字后，添加另一个 '.'

例如，仅输入数字，您将得到 555.323.7637

4) 如果你在一个“.”之后，比如“555.”，那么退格键会将其更改为“55”。

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

谢谢！

4

7 回答 7

1

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

如果你是用户1）了解格式，或者2）格式对实际使用不重要，那么1）让他们格式化，或者2）收到后格式化。

于 2009-08-03T00:22:22.027 回答
1

玩弄输入字段的工作方式是危险的领域。通过使用一系列事件处理程序来侦听按键，您可能会使其在 95% 的时间内工作。另外 5% 的时间你的用户会诅咒你的名字。考虑那些将复制并粘贴到文本框中的人（可能很多，因为它是 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    |
________________
于 2009-08-03T00:46:30.200 回答
0

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

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

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

于 2009-08-03T00:21:07.377 回答
0

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 但这就是你可以做到的。

编辑：它似乎做你想做的事。耸耸肩 它不允许任何其他键，但数字（没有退格、空格、回车、主页/结束等）。如果您需要这样做，请将其添加到您的问题中，以便我修改我的答案。

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

于 2009-08-03T00:31:43.727 回答
0

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

您可以让用户在文本框中输入他们的文本（仅使用REGEX验证数字字符），然后在另一个具有只读属性的文本框中显示带有onkeypress JavaScript 事件的格式化文本，这样用户就无法更改文本。

谢谢

于 2009-08-03T00:36:12.510 回答
0

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

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

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

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

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

于 2009-08-03T00:51:00.277 回答
0

Check out MeioMask http://www.meiocodigo.com/ it is a JQuery plugin that does most of what you are after.

于 2009-08-03T00:58:53.157 回答