«Прокрутка» справа от длинного ввода текста

Question

У меня есть селектор изображений, который позволяет выбрать изображение из галереи, а затем заполняет URL в поле <input type="text">. URL-адреса могут быть очень длинными, и всегда видно, что первая половина URL-адреса в текстовом поле имеет очень небольшое информационное значение.

Кто-нибудь знает способ «прокрутки» до самого правого края текстового поля, чтобы конец URL был виден вместо начала? Не прибегая к текстовой области.

Answer 1

Lucman Abdulrachman - лучший ответ, но я не могу его проголосовать, поэтому добавляю другое решение без использования jQuery:

var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;

Answer 2

Все браузеры, кроме IE6-8 / Opera

Установите HTMLInputElement.setSelectionRange() на длину входного значения после явной установки focus(). Недостатком является то, что он прокручивается назад, чтобы начать после размытия.

var foo = document.getElementById("foo");
foo.value = "/1389276/prokrutka-sprava-ot-dlinnogo-vvoda-teksta";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);

<input id="foo">  

Все браузеры, кроме IE / Opera

Если вас не интересует IE в целом, установите Element.scrollLeft на Element.scrollWidth. Недостатком является меньшая поддержка браузера.

var foo = document.getElementById("foo");
foo.value = "/1389276/prokrutka-sprava-ot-dlinnogo-vvoda-teksta";
foo.scrollLeft = foo.scrollWidth;

<input id="foo">

Все браузеры

Если вы хотите поддерживать каждый отдельный браузер, попробуйте обмануть его атрибутом dir (direction), для которого вы установите rtl (справа налево). Недостатком является то, что это хак, который действительно нужно принимать во внимание, когда он редактируемый и / или вы разрабатываете веб-сайт, чувствительный к направлению, но это работает во всех браузерах и отлично подходит для ввода только для чтения.

var foo = document.getElementById("foo");
foo.value = "/1389276/prokrutka-sprava-ot-dlinnogo-vvoda-teksta";

<input id="foo" dir="rtl">  

Answer 3

$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth; 

Answer 4

Вы можете просто установить свойство CSS direction в значение "rtl" (справа налево), JS не требуется. Это изменит направление прокрутки, а также выравнивание текста, поэтому это может выглядеть странно, когда текст короче размера ввода, но, учитывая, что ввод всегда будет содержать длинный URL, это не должно быть проблемой.

input {
  margin: 10px;
  direction: rtl;
}

<input type="text" value="short url" size="20">
<br>
<input type="text" value="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" size="20">

Надеюсь, это поможет.

Answer 5

Лучшим решением было бы сделать ввод достаточно большим, чтобы увидеть наиболее разумные длины URL. Ширина ввода по умолчанию обычно очень короткая. Уменьшая размер шрифта и увеличивая ширину (возможно, на процентную долю, чтобы заполнить доступное пространство), вы, вероятно, могли бы сделать URL-адреса, которые длиннее или длиннее, чем строка URL-адреса вашего браузера. Вам действительно не нужен очень большой текст для URL, поскольку вы, вероятно, просто проверяете, что он выглядит разумным, а не читаете его.

Если важна возможность просмотра всего URL-адреса, относительно крупным шрифтом (если ожидается, что пользователь будет опытным пользователем и, возможно, отредактирует URL-адрес вручную), вам следует использовать текстовую область. Это будет выглядеть немного странно с URL-адресом, произвольно упакованным в слово, но до тех пор, пока вы не вставите пробел, URL-адрес все равно должен быть действительным.

Если ваш веб-сервер отвечает за генерацию URL, вы можете попытаться сделать его менее подробным. Вы также можете сэкономить место, если можете использовать относительные URL (пропуская часть домена).