Mask input html: html — Implement an input with a mask

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="/inputmask.js"></script>

<input type="text" data-mask="999-99-999-9999-9" placeholder="ISBN">

$('.inputmask').inputmask({ mask: '999-99-999-9999-9' })

<div data-provides="fileinput">
 <div data-trigger="fileinput"><i></i> <span></span></div>
 <span><span>Select file</span><span>Change</span><input type="file" name="..."></span>
 <a href="#" data-dismiss="fileinput">Remove</a>
</div>

<div data-provides="fileinput">
 <span><span>Select file</span><span>Change</span><input type="file" name="..."></span>
 <span></span>
 <a href="#" data-dismiss="fileinput">&times;</a>
</div>

<div data-provides="fileinput">
 <div data-trigger="fileinput"></div>
 <div>
 <span><span>Select image</span><span>Change</span><input type="file" name="..."></span>
 <a href="#" data-dismiss="fileinput">Remove</a>
 </div>
</div>

<div data-provides="fileinput">
 <div>
 <img data-src="holder. js/100%x100%" alt="...">
 </div>
 <div></div>
 <div>
 <span><span>Select image</span><span>Change</span><input type="file" name="..."></span>
 <a href="#" data-dismiss="fileinput">Remove</a>
 </div>
</div>

data-provides="fileinput"

<input type="file" data-provides="fileinput">

$('.fileinput').fileinput()

<script src="/validator.min.js"></script>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">

 <form data-toggle="validator">
 <div>
 <label for="inputName">Номер телефона</label>
 <input type="tel" autocorrect="off" autocapitalize="off" pattern="^\+\d{2} \(\d{3}\) \d{3}-\d{2}-\d{2}$" minlength="19" placeholder="Номер телефона" required>
 </div>
 <button type="submit">Отправить</button>
 </form>

 

    Телефон:
    

 

 
<тело>
<голова>
<стиль>
вход {
  семейство шрифтов: моноширинный;
}
этикетка {
  дисплей: блок;
}
дел {
  поле: 0 0 1re 0;
}
.оболочка {
  положение: родственник;
  высота строки: 1; }
  .оболочка промежутка {
    положение: абсолютное;
    слева: 3px;
    верх: 1 пиксель;
    цвет: #ccc;
    события-указатели: нет;
    z-индекс: -1; }
    . shell span я {
      стиль шрифта: обычный;
      /* подойдет любой из этих 3 */
      цвет: прозрачный;
      непрозрачность: 0;
      видимость: скрытая; }
ввод.маскированный,
.оболочка промежутка {
  размер шрифта: 16px;
  семейство шрифтов: моноширинный;
  отступ справа: 10px;
  цвет фона: прозрачный;
  преобразование текста: верхний регистр; }



<тело>
<форма действие="">
  <дел>
    Номер телефона
    
  

0

В HTML можно использовать заполнитель.

 <форма>
    Телефон:
    

 

Однако, когда пользователь начнет печатать, заполнитель исчезнет.

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Начало работы с основами маскирования ввода

Маскирование ввода может недооцениваться или использоваться нечасто, но оно удобно в различных ситуациях, особенно если вы говорите об указании и принятии ввода в фиксированном формате — например, форматирование для пользовательского дату, номер или номер телефона.

Для начала мы рассмотрим два разных сценария.

Сценарий маскирования ввода № 1:

В качестве первого сценария давайте рассмотрим этот с использованием простого элемента Short Text , поэтому добавьте его в форму прямо сейчас, если вы еще этого не сделали. Чтобы просмотреть параметр Маска ввода , выполните следующие действия: 

1. Щелкните элемент «Краткий текст».
2. С правой стороны элемента щелкните Свойства (значок шестеренки).
3. Перейдите на вкладку Параметры .
4. Прокрутите вниз и найдите параметр Input Mask , обязательно включите его.

При маскировании ввода вы будете использовать только три символа HTML, и эти символы объясняются прямо под переключателем «Маска ввода».

@  =   Маски Буквы

#    =   Маски Числа

*    =   Маски Буквы и цифры

и, следовательно, ограничивает ваших пользователей замаскированными входами.

Это все еще может показаться немного запутанным, поэтому давайте разберем это еще подробнее, взглянув на эти примеры ниже.

Пример A:

Допустим, в этом примере вы хотите назвать города, которые начинаются с «Св.» (Святой), например, «Св. Августин», что будет выглядеть так: « @@ @@@ @@@@@@ ».

Внутренняя часть вашей формы:

Передняя часть вашей формы:

Пример B:

Теперь давайте взглянем на это в другом примере, где вы, возможно, захотите показать набор разделенных чисел, которые покажи вот так» #####».

Внутренняя часть вашей формы:

Передняя часть вашей формы:

Пример C:

Хорошо использовать Маску чисел также для расширенных настраиваемых дат, когда вы, возможно, не захотите использовать стандартную дату такие поля, как « ##/##/#### ».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример D:

И то, и другое хорошо, но что, если вам нужно что-то большее, но вам это не нужно много информации, например, в случае, когда вам нужен только адрес, где находится чья-то компания.

Таким образом, в этом конкретном случае вы хотели бы объединить вышеперечисленное, используя вместе @ и # , и это может выглядеть примерно так: « #### @@@@@@@@@ @@ ».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример E:

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

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример F:

Но что, если ничего из вышеперечисленного не подходит для вашей ситуации? Что, если вы работаете в правительстве, юриспруденции или даже в компании по производству автозапчастей? Вы также можете сделать это, разделив своих персонажей на части, чтобы создать что-то систематическое, например « #@-#**#-#@ ».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример G:

Некоторые из приведенных выше примеров имеют фиксированную маскировку ввода, так что, если вы хотите, чтобы пользователи могли вводить символы, но не требовали всего этого? Например, номер участника, который заканчивается одним или двумя символами. Вы можете сделать маскировку ввода как « @@-#####-@[@] ». Как видите, мы используем квадратную скобку для необязательного символа.

Внутренняя часть вашей формы:

Передняя часть вашей формы:

Теперь давайте рассмотрим это с другой стороны, используя второй сценарий для поля телефона.

Сценарий маскирования ввода № 2:

Конечно, использование возможности маскирования удобно, но что, если вы являетесь поставщиком телефонного справочника и ищете номера 1-800 для списка, или у вас есть пользователи с иностранными телефонными номерами и т.п.?

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

Пример A:

Для первого примера давайте начнем снова, но на этот раз добавим поле телефона. Вы должны иметь доступ к опции «Маска ввода» так же, как мы описали ранее в этом руководстве.

На этот раз вы заметите, что можете использовать маскировку номера только с помощью #, и вы также увидите изменение ввода телефонного номера по умолчанию с двух вводов на один ввод, который дополнительно предварительно заполняется « (###) # ##-#### »

Внутренняя часть вашей формы:

Передняя часть вашей формы:

Пример B:

Теперь, чтобы использовать это для номеров 1-800 с номером телефона, вы можно сделать что-то вроде « 1-(8##)-###-#### », чтобы ваши пользователи знали, что это тип необходимой информации.

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример C:

В качестве другого примера предположим, что вы планируете запустить программу информационно-коммуникационных звонков в Австралии.