Cursor zum Ende des Eingangs bewegen

Question

Ich habe ein Problem mit der Methode input und setSelectionRange. Das Problem ist, dass ich die Cursorposition am Ende setze:

Cursor bewegt sich zu Ende aber Text bleibt in der gleichen Position. Es funktioniert in Firefox, funktioniert aber nicht in 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

Ich fand einfache Lösung https://jsfiddle.net/r3yohhc0/1/, Eigenschaft scrollleft

input.scrollLeft = input.scrollWidth; 

Answer 2

Dies ist kein JS Problem ist aber ein CSS Problem.

Anstatt setSelectionRange zu setzen, fügen Sie dem Code einfach das folgende CSS hinzu.

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

Arbeits Code unten:
ich hinzugefügt habe eine Klasse statt ID als Stile Klassen setzen ist eine bessere Praxis als für IDs zu schreiben.

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" />

Hope this behebt das Problem.

UPDATE:

entfernt Stile und hinzugefügt Stile über JS

den Link js Geige aktualisiert - https://jsfiddle.net/hsbea61b/6/

Answer 3

Haben Sie versucht, CSS dynamisch Statt

text-align: right; 

Answer 4

hinzufügen von Die native setSelectionRange verwendet diese Funktion:

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

In der Tat das Problem der Kompatibilität ist ein Fehler in Chrome 39 befestigt. Also statt:

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

werden Sie verwenden:

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

Hier ein fiddle ist, die ich getestet habe.