title: How can I allow only numbers, one comma, and two digits after the comma in my input field?
body: <p>I have an input field, that only allows numbers and one point. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.number').keypress(function(event) {
      var $this = $(this);
      if ((event.which != 46 || $this.val().indexOf('.') != -1) &amp;&amp;
         ((event.which &lt; 48 || event.which &gt; 57) &amp;&amp;
         (event.which != 0 &amp;&amp; event.which != 8))) {
             event.preventDefault();
      }
  
      var text = $(this).val();
      if ((event.which == 46) &amp;&amp; (text.indexOf('.') == -1)) {
          setTimeout(function() {
              if ($this.val().substring($this.val().indexOf('.')).length &gt; 3) {
                  $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
              }
          }, 1);
      }
  
      if ((text.indexOf('.') != -1) &amp;&amp;
          (text.substring(text.indexOf('.')).length &gt; 2) &amp;&amp;
          (event.which != 0 &amp;&amp; event.which != 8) &amp;&amp;
          ($(this)[0].selectionStart &gt;= text.length - 2)) {
              event.preventDefault();
      }      
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.number {
      padding: 5px 10px;
      font-size: 16px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" class="number" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to use this for currency so instead of the point I need to have a comma. So I replaced every point into the function with a comma. But it is not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.number').keypress(function(event) {
      var $this = $(this);
      if ((event.which != 46 || $this.val().indexOf(',') != -1) &amp;&amp;
         ((event.which &lt; 48 || event.which &gt; 57) &amp;&amp;
         (event.which != 0 &amp;&amp; event.which != 8))) {
             event.preventDefault();
      }
  
      var text = $(this).val();
      if ((event.which == 46) &amp;&amp; (text.indexOf(',') == -1)) {
          setTimeout(function() {
              if ($this.val().substring($this.val().indexOf(',')).length &gt; 3) {
                  $this.val($this.val().substring(0, $this.val().indexOf(',') + 3));
              }
          }, 1);
      }
  
      if ((text.indexOf(',') != -1) &amp;&amp;
          (text.substring(text.indexOf(',')).length &gt; 2) &amp;&amp;
          (event.which != 0 &amp;&amp; event.which != 8) &amp;&amp;
          ($(this)[0].selectionStart &gt;= text.length - 2)) {
              event.preventDefault();
      }      
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.number {
    padding: 5px 10px;
    font-size: 16px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" class="number" /&gt;</code></pre>
  </div>
  </div>
  </p>