Полимерная бумажная маска

Я использую Polymer (v1.4.0) для проекта, и я хотел бы знать, есть ли способ добавить маску ввода для ввода бумаги?Полимерная бумажная маска

Я попытался использовать jquery.inputmask, добавив его непосредственно к элементу ввода входного документа, но после этого событие привязки и изменения перестало работать.

Если это невозможно, вы знаете какой-либо другой компонент ввода текста с поддержкой маски?

Спасибо! Андре

источник

2016-05-29 André Schuster

Вы можете использовать золото-ххх-элементы ввода в качестве шаблона, как построить свой собственный маскируется элемент ввода https://elements.polymer-project.org/elements/gold-cc-input

источник

2016-05-29 15:10:47

Да, я проверял те компоненты, в настоящее время. Вы знаете, есть ли веб-компонент с поддержкой маски? Я не смог найти его в https://customelements.io/. В противном случае, я пойду на это, я просто не хочу изобретать велосипед. –

Нет, еще не видели одного с поддержкой общей маски. –

Собственно, 'paper-input' поддерживает маскировку (см. Мой ответ). – tony19

Да, вы можете использовать <paper-input> «s allowedPattern с preventInvalidInput. Например, это маски из не-цифрового ввода:

<head> 
 
    <base href="https://polygit.org/polymer+1.9.3/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 
    <paper-input label="enter an integer" 
 
       prevent-invalid-input 
 
       allowed-pattern="[\d]+"></paper-input> 
 
</body>

^codepen

источник

2016-05-29 16:54:12 tony19

Этот ответ не предоставляет те же функции, что и jquery.inputmask. Хотя вы можете управлять тем, что пользователь вводит, вы не можете автоматически добавлять символы в текст, например, вводить номер телефона и иметь тире и пробелы, вставленные для вас. – pedromanoel

Вот что я закончил с полимером, 2 и бумажным вводом из коробки, нет пользовательского кодирования с использованием номера телефона в качестве примера. Несколько близкое приближение маскированного ввода без супер-красивого добавления тире (-) автоматически.

бумага-ввод-маска - это то, что необходимо.

<head> 
 
    <base href="https://polygit.org/polymer+1.9.3/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 

 

 

 
    <paper-input 
 

 
    auto-validate 
 
    allowed-pattern="[0-9-]" 
 
    pattern="\d{3}[\-]\d{3}[\-]\d{4}" 
 
    prevent-invalid-input 
 
    label="Mobile Phone" 
 
    placeholder="___-___-___" 
 

 
    id="phoneNumber" 
 
    type="tel" 
 
    disabled$=[[disabled]] 
 
    > 
 
    </paper-input> 
 

 

 

 

 
</body>

источник

2017-08-10 22:07:31

Полимерная бумажная маска

ответ

Смежные вопросы