Переместить курсор на конец ввода

Question

У меня проблема с методом ввода и 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 как положить стили классов лучше практика, чем писать его для идентификаторов.

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

Вы пытаетесь добавить CSS динамически

text-align: right; 

Answer 4

Вместо нативный 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 является ошибка исправлена ​​в Chrome 39. Таким образом, вместо:

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

вы будете использовать:

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

Вот fiddle, что я проверил.