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

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

3 голосов
/ 21 марта 2009

Проблема, с которой я сталкиваюсь, состоит в том, что при заданном элементе ввода, длина которого намного шире, чем ширина элемента (как установлено в его стиле), и, учитывая значение, которое шире ширины элемента, как я могу получить элемент для «прокрутки» до конца текста. В IE это легко, я создаю объект textRange, помещаю его начальную и конечную позиции в конец текста, вызываю select в этом диапазоне, и bam, курсор помещается в конец текста И текст смещается так, что конец показан. В 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>

Ответы [ 2 ]

7 голосов
/ 21 марта 2009

Я сомневаюсь, что это отличное кросс-браузерное решение, однако в 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 здесь .

2 голосов
/ 21 марта 2009

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

Редактировать: дальнейшая работа: 

<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>
...