カーソルを入力の最後に移動

Question

inputとsetSelectionRangeメソッドに問題があります。問題は、最後にカーソル位置を設定したことです。

input.setSelectionRange(input.value.length,input.value.length); 

カーソルは最後まで移動しますが、テキストは同じ位置にとどまります。 Firefoxでは動作しますが、Chromeでは動作しません。

var input = document.querySelector("input"); 
 
input.onclick = function(){ 
 
    this.setSelectionRange(this.value.length,this.value.length) 
 
}

<input id="beLowerCase" type="Text" value="______________________________232332" />

Answer 1

私は簡単な解決策https://jsfiddle.net/r3yohhc0/1/、プロパティscrollLeft

input.scrollLeft = input.scrollWidth; 

Answer 2

これは、JSの問題が、CSSの問題ではありません。

setSelectionRangeを設定する代わりに、次のCSSをコードに追加するだけです。以下のコードの作業

<style> 
input#beLowerCase {text-align:right;} 
</style> 

：私はクラスにスタイルを置くようかわりIDのクラスを追加した
は、IDのためにそれを書くよりも優れて練習しています。

document.querySelector("input").onclick = function() { 
 
    var val = this.value 
 
    this.value = ""; 
 
    this.value = val; 
 
    this.style.textAlign = "right"; 
 
    this.style.textIndent = "-1000px"; 
 
} 
 
document.querySelector("input").onkeydown = function() { 
 
    this.style.textAlign = "auto"; 
 
    this.style.textIndent = "0"; 
 
}

<input id="beLowerCase" class="align-right" type="Text" value="______________________________232332" />

ホープこれはあなたの問題を解決します。

UPDATE：JS

経由

削除スタイル、コメントを追加しましたスタイルのjsフィドルリンクを更新 - https://jsfiddle.net/hsbea61b/6/

Answer 3

あなたが動的に

text-align: right; 

Answer 4

代わりのCSSを追加しようとしましたがネイティブsetSelectionRangeはこの関数を使用します：

実際に

function setSelectionRange(input, selectionStart, selectionEnd) { 
    if (input.setSelectionRange) { 
     input.focus(); 
     var isChrome = !!window.chrome && !!window.chrome.webstore; 
     if (isChrome){ 
      input.style.textIndent = "-1000px"; 
      input.onblur =function(){ 
       input.style.textIndent = "0px"; 
      }; 
      window.setTimeout(function() { 
       input.setSelectionRange(selectionStart, selectionEnd); 
      }, 0); 
     }else 
      input.setSelectionRange(selectionStart, selectionEnd); 
    }else if (input.createTextRange) { 
     var range = input.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', selectionEnd); 
     range.moveStart('character', selectionStart); 
     range.select(); 
     } 
} 

compabilityの問題は、クローム39に固定バグです。 ので、代わりの：

input.onclick = function(){ 
    this.setSelectionRange(this.value.length,this.value.length) 
} 

あなたが使用します。

input.onclick = function(){ 
     setSelectionRange(this,this.value.length,this.value.length) 
} 

は、ここで私がテストしてみたfiddleです。