admin管理员组

文章数量:1296914

The problem I am having is that given an input element with a maxlength that is much wider than the element's width (as set in its style), and, given a value that is wider than the element's width, how can I get the element to "scroll" to the end of the text. In IE it is easy, I create a textRange object, put its start and end position at the end of the text, call select on that range, and bam, the cursor is placed at the end of the text AND the text is shifted so that the end is shown. In Firefox, Chrome, Safari, trying to use the input element's setSelectionRange sets the cursor in the right position, but the text is not shifted so that I see its end, but instead the beginning. Does anybody know of a way I could go about placing the cursor at the end of the text AND shifting the text so that I can see the cursor?

Thank you!

Shane

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
      function setCursor()
      {
         var objInput = document.getElementById( 'testinputbox' );
         var nLength = objInput.value.length;

         objInput.focus();
         objInput.setSelectionRange( nLength, nLength );
      }
    </script>
  </head>
  <body onload='setCursor();'>
    <input id='testinputbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>

The problem I am having is that given an input element with a maxlength that is much wider than the element's width (as set in its style), and, given a value that is wider than the element's width, how can I get the element to "scroll" to the end of the text. In IE it is easy, I create a textRange object, put its start and end position at the end of the text, call select on that range, and bam, the cursor is placed at the end of the text AND the text is shifted so that the end is shown. In Firefox, Chrome, Safari, trying to use the input element's setSelectionRange sets the cursor in the right position, but the text is not shifted so that I see its end, but instead the beginning. Does anybody know of a way I could go about placing the cursor at the end of the text AND shifting the text so that I can see the cursor?

Thank you!

Shane

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
      function setCursor()
      {
         var objInput = document.getElementById( 'testinputbox' );
         var nLength = objInput.value.length;

         objInput.focus();
         objInput.setSelectionRange( nLength, nLength );
      }
    </script>
  </head>
  <body onload='setCursor();'>
    <input id='testinputbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>
  • javascript
  • html
  • firefox
  • html-input
Share edited Nov 21, 2022 at 8:36 sideshowbarker♦ 88.3k29 gold badges215 silver badges212 bronze badges asked Mar 21, 2009 at 4:03 Shane TomlinsonShane Tomlinson 3,3503 gold badges21 silver badges12 bronze badges 2
  • 3 It is the distant future, the year two-thousand. We are web developers. The world is quite different ever since the HTML4 specification of the late nineties. We no longer use <script language='javascript'>. Instead, we use <script type='text/javascript'>. – Matt Commented Aug 12, 2010 at 4:19
  • This solution, which applies for <textarea>, works for <input> too. At least for Chrome. – user202729 Commented Mar 26, 2020 at 3:50
Add a ment  | 

3 Answers 3

Reset to default 7

I doubt this is a great cross-browser solution, however it does seem to be a work around in Firefox. I originally tried it by simulating the right arrow-key press, but didn't have any luck.

function setCursor(id)
{
    var elem = document.getElementById(id);

    elem.focus();
    elem.setSelectionRange(elem.value.length, elem.value.length);

    // Trigger a "space" keypress.
    var evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
    elem.dispatchEvent(evt);

    // Trigger a "backspace" keypress.
    evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
    elem.dispatchEvent(evt);
}

More info on initKeyEvent here.

It is a kludge, but it works:

Edit: further kludged to actually work:

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
function setatend() {
    var save = document.getElementById("mytextbox").value;
    mytextbox.focus(); 
    mytextbox.value = save; 
}
function setfocus() {
    var box = document.getElementById("mytextbox");
    box.focus();    
}
</script>
  </head>
      <body onload='setfocus();'>
    <input onfocus='setatend();' id='mytextbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>

If You just need to scroll the element to the end then use:

document.querySelector('button').addEventListener('click', () => {
  const input  = document.querySelector('input');
  input.scrollLeft = input.scrollWidth - input.clientWidth;
});
<input value="start,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,end"/>
<br><br>
<button>Scroll</button>

scrollLeft - what's hidden on the left, 0px at start.
clientWidth - width of the visible portion of the element.
scrollWidth - width of the visible and hidden portion of the element.

Works same for vertical scroll using scrollTop, clientHeight and scrollHeight

本文标签：

版权声明：本文标题：javascript - How do I shift the visible text in a narrow input element to see the cursor at the end? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741646466a2390214.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。