3

私が抱えている問題は、要素の幅 (スタイルで設定されている) よりもはるかに広い maxlength を持つ入力要素が与えられ、要素の幅よりも広い値が与えられた場合、要素をどのように取得できるかということですテキストの最後まで「スクロール」します。IEでは簡単です。textRangeオブジェクトを作成し、その開始位置と終了位置をテキストの最後に置き、その範囲でselectを呼び出し、バム、カーソルをテキストの最後に配置し、テキストをシフトします結末が示されること。Firefox、Chrome、Safari では、input 要素の 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>
4

2 に答える 2

7

これが優れたクロスブラウザソリューションであるとは思えませんが、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の詳細については、こちらをご覧ください。

于 2009-03-21T06:20:03.113 に答える
2

それはクラッジですが、動作します：

編集：実際に機能するためにさらにこっそり：

<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>
于 2009-03-21T13:34:09.030 に答える