title: Stop the cursor from moving at the end of the string
body: <p>I have a <code>JQuery function</code> to <code>Capitalize</code> the first alphabet of each word of a string.
  Which is working fine. </p>
  
  <p>The issue I am getting is, that, when I type any alphabet at the beginning of the word the cursor moves to the last alphabet of the string. If I type anything in between the cursor stays at it's place.</p>
  
  <p>I searched and got some solutions but that where <code>.jsp</code> or <code>javascript</code> based. Looking for some simple <code>JQuery</code> solution.</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>function pCase(strg) {
    var str = strg;
    str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
    });
    return str;
  }
  
  
  function propCase(obj) {
    obj.value = pCase(obj.value);
  }
  
  $(function() {
    $(".properCase").on("keyup", function() {
      propCase(this);
    });
  });</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;div id="banner-message"&gt;
    &lt;input type="text" class="properCase" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>