title: Characters being injected into input field
body: <p>I am sure this is something really stupid I am missing.</p>
  
  <p>I am writing a small snippet that adds a hyphen to a string grabbed from an input field. The hyphen is only added once we hit position 4, so I can type 123 and the hyphen will not appear. If I type 1234, it'll automatically change to 1234-. The problem is with handling pasting, somewhere down the line inside jQuery (after my code has executed), it's injecting more characters into the field.</p>
  
  <p>My approach is simple enough. I look at the keyup and keydown event, check the input and insert the hyphen. For pasting I look at the paste even, grab the string, split it and insert a hyphen depending on if one is present or not.</p>
  
  <pre><code>$('[id$="field"]').on('paste', function (event) {
      var element = this;
      var text = event.originalEvent.clipboardData.getData('text').split('');
  
      if (text.length &gt; 4 &amp;&amp; text.indexOf('-') &lt; 0) {
          text.splice(4, 0, '-');
          $(element).val(text.join(''));
      }
  });
  
  $('[id$="field"]').bind('keyup keydown', function (event) {
      var input = $(this).val();
  
      if (input.length === 4 &amp;&amp; event.keyCode !== 8) {
          $($(this).val(input + '-'));
      }
  });
  </code></pre>
  
  <p>The <code>keyup</code> and <code>keydown</code> listener works just fine. If I paste in 12345, I end up with 1234-5 when I hit <code>$(element).val(text.join(''));</code> yet afterwards that extra char pops whilst jQuery is doing its thing.</p>
  
  <p>I am rather baffled.</p>
  
  <p>Any ideas?</p>