HTML текстовое поле, которое автоматически добавляет символы

Question

Эй, ребята, я пытаюсь создать текстовое поле HTML, которое: 1) принимает только цифры 2) после 3 цифр добавляет «.» 3) после 6 цифр добавляет еще один '.'

Так, например, набрав только цифры, вы получите 555.323.7637

4) Если вы ставите после «.», Например «555.», то возврат на другую позицию изменит его на «55».

Я гуглил, но не знаю точный термин, который ищу.

Спасибо!

Answer 1

Игра с тем, как работают поля ввода, является опасной территорией. Используя ряд обработчиков событий для прослушивания нажатий клавиш, вы, вероятно, сможете заставить его работать в 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 2

Это выглядит как раздражающий пользовательский опыт, но если вы настаиваете, то вы можете использовать слушатели onkeyup / onkeydown / onkeypress (вероятно, достаточно onkeyup).

Если вы являетесь пользователями 1) понимаете формат или 2) формат не важен для реального использования, то 1) разрешите им отформатировать его или 2) отформатируйте его после получения.

Answer 3

Проверьте MeioMask http://www.meiocodigo.com/ это плагин JQuery, который делает большую часть того, что вы ищете.

Answer 4

Я пытался сделать это раньше, но не смог заставить его работать так полно, как я хотел. Я обнаружил, что захват события «нажатие клавиши» (или, что еще лучше, событие «нажатие клавиши») и перезапись значения поля в нем были действительно хорошими. (Это то, что делают большинство «маскирующих» библиотек, а другие уже опубликовали пример кода.) Здесь я расскажу о ПРОБЛЕМАХ, которые были у меня с этим подходом:

(1) Было трудно справиться с проблемой людей, использующих клавиши курсора для перемещения вперед и назад по полю. Там есть заметки о том, как захватывать клавиши курсора кроссплатформенным способом, но это немного сложно.

(2) Обработка нажатия клавиши удаления была еще более болезненной (тем более что они могут перемещаться или щелкать в любом месте поля). Простое удаление символа перед курсором, когда он нажимает «удалить», НЕ было хорошим опытом для пользователя: бывали ситуации, когда люди не могли удалять вещи! Представьте, что они набирают «123.4», а затем нажимают «Удалить» 6 раз подряд. Первое удаление удаляет «4» (пока что хорошо), следующее удаляет «.». Теперь ваши правила форматирования видят «123», и они добавляются в десятичной форме для «123.» Пользователь может нажать «Удалить» так часто, как ему нравится, и это никуда не денется! Мы решили это, удалив удалить прежний важный символ (цифры в вашем случае) вместо предыдущего символа.

(3) Мы никогда не решали проблему с пастой. Вставка через "ctrl-v" генерирует ключевое событие, которое может быть перехвачено на разных платформах, но вставка через меню редактирования просто не может быть зафиксирована на разных платформах. В конце концов мы просто отказались от этого.

Я надеюсь, что этот опыт поможет. Я хотел бы поделиться своим кодом, но, к сожалению, это было для работы, и мне не разрешено.

Answer 5

Вы можете использовать тот же метод, который используется в этом текстовом поле «Ваш ответ».

Пользователь может ввести свой текст в текстовое поле (проверить только для числовых символов, используя REGEX ), а затем отобразить форматированный текст ниже с помощью события onkeypress JavaScript в другом текстовое поле с атрибутом только для чтения , поэтому пользователь не может изменить текст.

Спасибо

Answer 6

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: Backspace теперь работает, как описано в вопросе OP. Удалить немного сложнее, и его оставляют в качестве упражнения для ОП.

Answer 7

То, что вы хотите сделать, вероятно, будет включать в себя Javascript, воздействующий на события onKey___ текстового поля, о котором идет речь, для проверки и (при необходимости) изменения значения поля.

Чтобы изменить поведение клавиши Backspace, вам, вероятно, также необходимо выполнить какие-либо действия с событием onKeyDown, чтобы учесть содержимое поля.

Альтернативный вариант, упоминаемый в другом ответе, состоит в том, чтобы просто использовать 3 отдельных текстовых поля - вы можете использовать Javascript, чтобы курсор автоматически «перепрыгивал» на следующее поле после заполнения каждого, что является довольно стандартным решением как ввод номера телефона.