Как автоматически добавить дефис в пользовательский ввод с использованием Javascript? - PullRequest
Новая
       31

Как автоматически добавить дефис в пользовательский ввод с использованием Javascript?

0 голосов
/ 16 марта 2019

Я пытаюсь проверить и настроить ввод пользователя для почтового индекса в соответствии с форматом: xxxxx ИЛИ xxxxx-xxxx Существует ли простой способ с помощью javascript автоматически добавлять дефис (-), если пользователь вводит более 5 цифр?

Ответы [ 4 ]

1 голос
/ 16 марта 2019

Анна,

Лучший способ сделать это - использовать регулярное выражение.Вам понадобится: 

^[0-9]{5}(?:-[0-9]{4})?$

Вы бы десять использовали что-то вроде: 

function IsValidZipCode(zip) {
        var isValid = /^[0-9]{5}(?:-[0-9]{4})?$/.test(zip);
        if (isValid)
            alert('Valid ZipCode');
        else {
            alert('Invalid ZipCode');
        }
    }

В вашем HTML-вызове это выглядит так: 

<input id="txtZip" name="zip" type="text" /><br />
<input id="Button1" type="submit" value="Validate"
onclick="IsValidZipCode(this.form.zip.value)" />

Дополнительная информация о регулярных выражениях: хорошая статья:

Регулярные выражения в сети разработчиков Mozilla

1 голос
/ 16 марта 2019

Попробуйте следующее. 

function add_hyphen() {
    var input = document.getElementById("myinput");
    var str = input.value;
    str = str.replace("-","");
    if (str.length > 5) {
        str = str.substring(0,5) + "-" + str.substring(5);
    }
    input.value = str
}
<input type="text" id="myinput" value="a" OnInput="add_hyphen()"></input>
1 голос
/ 16 марта 2019

Уверен, что есть!Просто нужно проверить, сколько символов во введенной строке, и, если это 5, добавить дефис к строке:) 

var input = document.getElementById("ELEMENT-ID");
input.addEventListener("input", function() {
  if(input.value.length === 5) {
    input.value += "-";
  }
}
0 голосов
/ 16 марта 2019

Вы можете попробовать использовать простую функцию javascript следующим образом 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>JS Bin</title>
  <script>
    function FN_HYPEN(){
    var input = document.getElementById("USER");

  if(input.value.length === 5) {
    input.value += "-";
  }

                       }
  </script>
</head>
<body>
<INPUT ID="USER" TYPE="TEXT" onKeypress="FN_HYPEN();"/>
</body>
</html>
...