Question

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

因此，例如，只输入数字，你就会得到 555.323.7637

4）如果您在“。”之后，如“555”，那么退格会将其更改为“55”。

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

谢谢！

Answer 1

这看起来像是一种烦人的用户体验，但如果你坚持那么你可以使用onkeyup / onkeydown / onkeypress监听器（onkeyup可能就足够了）。

如果您是用户1）了解格式，或2）格式对于实际使用并不重要，那么1）让它们格式化，或2）在接收后格式化它。

Answer 2

了解输入字段的工作原理是危险的。通过使用一系列事件处理程序来监听按键操作，您可能会在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 3

您想要做的可能是Javascript会对相关文本字段的onKey___事件进行操作，以验证并（如果必要）修改字段的值。

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

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

Answer 4

<强> 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： Backspace现在可以按照OP的问题进行操作。删除有点棘手，留给OP作为练习。

Answer 5

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

您可以让用户在文本框中输入文本（仅使用REGEX验证数字字符），然后在onkeypress JavaScript event的另一个文本框中显示带有{read only的格式化文本3}}属性，因此用户无法更改文本。

由于

Answer 6

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

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

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

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

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

Answer 7

查看MeioMask http://www.meiocodigo.com/它是一个JQuery插件，可以完成你所追求的大部分内容。

自动添加字符的html文本框

7 个答案: