title: Formatting the input field using javascript wont work with form_widget
body: <p>I am using javascript to format my input field but it didn't work , I think the error how call the function on my widget , I have tried a lot of solution but it didn't work. 
  I have followrd this example:<a href="https://jsfiddle.net/alvinbunk/4bg6z1do/8/" rel="nofollow noreferrer">https://jsfiddle.net/alvinbunk/4bg6z1do/8/</a></p>
  
  <p>this is my input field  :</p>
  
  <pre><code>  &lt;div&gt;{{ form_widget(form.lien, {'attr':{'class': 'form-control' ,'placeholder' :'Format xxxx-xxxx-xxxx-xxxx' ,'id':'form_lien','maxlength' : '19','onkeypress':'keyPressLien(event,"form_lien");'   }}) }}&lt;/div&gt;
  </code></pre>
  
  <p>in my formtype:</p>
  
  <pre><code> add('lien', TextType::class, [
                  'label' =&gt; 'lien',
                  'label_attr'=&gt;array('id'=&gt;'lien','style'=&gt; 'text-align :left')
              ])
  </code></pre>
  
  <p>this is my script :</p>
  
  <pre><code>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 + '-';
                  }
  
              }
          }
  </code></pre>
  
  <p>Update:</p>
  
  <p>this code works :</p>
  
  <pre><code>'onkeypress':'keyPressLienHindex(event,"'~form.lien.vars.id~'");
  </code></pre>