Как сдвинуть видимый текст в узком элементе ввода, чтобы увидеть курсор в конце?

Проблема, с которой я столкнулся, заключается в том, что для входного элемента с максимальной длиной, которая намного шире, чем ширина элемента (как установлено в его стиле), и, учитывая значение, которое шире, чем ширина элемента, как я могу получить элемент для «прокрутите» до конца текста. В IE это просто: я создаю объект textRange, помещаю его начальную и конечную позиции в конец текста, вызываю select в этом диапазоне и бац, курсор помещается в конец текста И текст сдвигается так что конец показан. В Firefox, Chrome, Safari попытка использовать setSelectionRange входного элемента устанавливает курсор в правильную позицию, но текст не смещается, так что я вижу его конец, а вместо этого начало. Кто-нибудь знает, как я могу разместить курсор в конце текста И сдвинуть текст, чтобы я мог видеть курсор?

Спасибо!

Шейн

<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 w3c
person Shane Tomlinson    schedule 21.03.2009    source источник
comment
Это далекое будущее, двухтысячный год. Мы веб-разработчики. Со времен спецификации HTML4 в конце девяностых мир стал совсем другим. Мы больше не используем ‹script language = 'javascript'›. Вместо этого мы используем ‹script type = 'text / javascript'›.   -  person Matt    schedule 12.08.2010
comment
Это решение, которое применяется для ‹textarea›, работает и для ‹input›. По крайней мере, для Chrome.   -  person user202729    schedule 26.03.2020

Ответы (2)


arrow_upward
7
arrow_downward

Я сомневаюсь, что это отличное кроссбраузерное решение, но похоже, что в Firefox его можно обойти. Первоначально я пробовал это, моделируя нажатие клавиши со стрелкой вправо, но безуспешно.

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);
}

Дополнительную информацию об initKeyEvent можно найти здесь.

person jthompson    schedule 21.03.2009
comment
Большое спасибо за это, это работает для меня, как и в Firefox, теперь мне пора выяснить, как заставить Safari / Chrome подчиняться моей воле! Еще раз спасибо! - person Shane Tomlinson; 21.03.2009
comment
См. stackoverflow.com/questions/29899364/. 1) initKeyEvent устарел. 2) Кажется, вы могли бы просто сделать new KeyboardEvent('keypress') после установки фокуса (пробел + backspace не нужен). - person Adam Zerner; 27.04.2015

arrow_upward
2
arrow_downward

Это кладж, но он работает:

Изменить: дальше работать, чтобы работать:

<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>
person WakeUpScreaming    schedule 21.03.2009
comment
Вам нужно сделать отступ в 4 пробела для правильного форматирования. - person Chetan S; 21.03.2009
comment
Этот подход был моим первоначальным решением, и он помещал курсор в конец, но не сдвигал содержимое, как я надеялся. Огромное спасибо! - person Shane Tomlinson; 21.03.2009
comment
Исправлено дальнейшими кладгерами. - person WakeUpScreaming; 21.03.2009