Place cursor at end of text in text input element
<p>Tapping into the input field containing values, cursor should point at the end.
It's actually browser's default behavior. But in iPhone and iPad, when user clicks on input border (upper border), cursor is appearing at the beginning of the input field. Below is a sample field in which I have tried couple of suggestions..but no luck.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta name = "viewport" content = "width=device-width, initial-scale = 1 , maximum-scale=1, , maximum-scale = 1, user-scalable = 0"&gt;
    &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;

    &lt;script&gt;
    $('document').ready(function(){
        $('input').focus(function(){
          this.selectionStart = this.selectionEnd = this.value.length;
          console.log("yp");
        });
    });
    &lt;/script&gt;
    &lt;style&gt;
        body{
            font-size: 20px;
        }
        input{
            padding: 10px;
            font-size: 20px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;form action=""&gt;
    &lt;br&gt;
    Username: &lt;input type="text" name="usrname" value="Dipen" onfocus="this.value = this.value;"&gt;
    &lt;br&gt;
    &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Thanks in advance!!</p>