title: Move caret to the end of a text input field AND make the end visible
body: <p>I'm going insane. I have an autosuggest box where users choose a suggestion. On the next suggestion selection the value of the text input box exceeds its size. I can move the carat to the end of the input field crossbrowser, no problem. But on Chrome and Safari I cannot SEE the carat at the end. The end of the text is not visible.</p>
  <p>Is there a way to move the carat to the end of a text input field AND have the end of the field visible so that the user is not confused about where the input carat went?</p>
  <p>what I got so far:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Field update test&lt;/title&gt;&lt;/head&gt;
  
  &lt;body&gt;
  &lt;form action=&quot;#&quot; method=&quot;POST&quot; name=&quot;testform&quot;&gt;
  
  &lt;p&gt;After a field is updated the carat should be at the end of the text field AND the end of the text should be visible&lt;/p&gt;
  
  &lt;input type=&quot;text&quot; name=&quot;testbox&quot; value=&quot;&quot; size=&quot;40&quot;&gt;
  
  &lt;p&gt;&lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;add_more_text();&quot;&gt;add more text&lt;/a&gt;&lt;/p&gt;
  
  &lt;/form&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  &lt;!--
  var count = 0;
  
  function add_more_text() {
     var textfield = document.testform.elements['testbox'];
  
     textfield.focus();
  
     if (count == 0) textfield.value = ''; // clear old
  
     count++;
     textfield.value = textfield.value + (textfield.value.length ? ', ' : '') + count + &quot;: This is some sample text&quot;;
  
     // move to the carat to the end of the field
     if (textfield.setSelectionRange) {
        textfield.setSelectionRange(textfield.value.length, textfield.value.length);
     } else if (textfield.createTextRange) {
        var range = textfield.createTextRange();
        range.collapse(true);
        range.moveEnd('character', textfield.value.length);
        range.moveStart('character', textfield.value.length);
        range.select();
     }
  
     // force carat visibility for some browsers
     if (document.createEvent) {
        // Trigger a space keypress.
        var e = document.createEvent('KeyboardEvent');
        if (typeof(e.initKeyEvent) != 'undefined') {
           e.initKeyEvent('keypress', true, true, null, false, false, false, false, 0, 32);
        } else {
           e.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 0, 32);
        }
        textfield.dispatchEvent(e);
  
        // Trigger a backspace keypress.
        e = document.createEvent('KeyboardEvent');
        if (typeof(e.initKeyEvent) != 'undefined') {
           e.initKeyEvent('keypress', true, true, null, false, false, false, false, 8, 0);
        } else {
           e.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 8, 0);
        }
        textfield.dispatchEvent(e);
     }
  }
  // --&gt;
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>