Форматирование поля ввода с использованием JavaScript не будет работать с form_widget

Question

Я использую javascript для форматирования поля ввода, но это не сработало, я думаю, ошибка, как вызов функции на моем виджете, я пробовал много решений, но это не сработало. У меня есть следующий пример: https://jsfiddle.net/alvinbunk/4bg6z1do/8/

это мое поле ввода:

  <div>{{ form_widget(form.lien, {'attr':{'class': 'form-control' ,'placeholder' :'Format xxxx-xxxx-xxxx-xxxx' ,'id':'form_lien','maxlength' : '19','onkeypress':'keyPressLien(event,"form_lien");'   }}) }}</div>

в моей форме:

 add('lien', TextType::class, [
                'label' => 'lien',
                'label_attr'=>array('id'=>'lien','style'=> 'text-align :left')
            ])

это мой сценарий:

function keyPressLien(e, id) {
            var phone = document.getElementById(id);


            if (e.key !== "Backspace") {
                if (phone.value.length === 4) {
                    phone.value = phone.value + '-';
                }
                if (phone.value.length === 9) {
                    phone.value = phone.value + '-';
                }
                if (phone.value.length === 14) {
                    phone.value = phone.value + '-';
                }

            }
        }

Обновление:

работает этот код:

'onkeypress':'keyPressLienHindex(event,"'~form.lien.vars.id~'");

Answer 1

form_lien должен быть идентификатором ввода? Если так: обычно это не так. либо используйте

'onkeypress':'keyPressLien(event, this.id);'

, который будет использовать функциональность javascript для определения идентификатора элемента ввода - при условии, что он имеет идентификатор или использовать

'onkeypress':'keyPressLien(event,"'~form.lien.vars.id~'");'

, который использует идентификатор, который компонент Form Symfony присваивает форме, которая редко называется form_[fieldname], если только тип формы фактически не называется FormType (что, вероятно, будет запахом кода).

однако почему бы просто не предоставить сам элемент:

'onkeypress':'keyPressLien(event, this);'

и функция:

function keyPressLien(event, phone) {
    // drop the line: var phone = ... 
    // rest is the same!

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