У меня есть селектор изображений, который позволяет выбирать изображение из галереи, а затем заполняет URL-адрес в поле <input type="text">. URL-адреса могут быть ужасно длинными, и всегда видеть первую половину URL-адреса в текстовом поле очень мало информативного значения.
Кто-нибудь знает способ "прокрутить" до самого правильного текстового поля, чтобы конец URL-адреса был виден вместо начала? Не прибегая к текстовой области.
Установите HTMLInputElement.setSelectionRange() значение длины ввода после явной установки focus(). Недостатком является то, что он прокручивается назад, чтобы начать размываться.
var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);<input id="foo"> Ответ Lucman Abdulrachman является лучшим, но я не могу его продвинуть, поэтому я добавляю другое решение без использования jQuery:
var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;
$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;
Лучшим решением было бы сделать вход достаточно большим, чтобы увидеть наиболее разумные длины. Ширина ввода по умолчанию обычно очень мала. Уменьшая размер шрифта и увеличивая ширину (возможно, на процент, чтобы заполнить свободное пространство), вы, вероятно, можете сделать url, который длиннее или длиннее, чем панель URL вашего браузера, видима. Вам не нужен очень большой текст для URL-адреса, поскольку вы, вероятно, просто проверяете, что он выглядит разумным, а не читайте его.
Если возможность просмотра всего URL-адреса важна в относительно большом шрифте (если ожидается, что пользователь будет продвинутым пользователем и, возможно, отредактирует мануал url), вам следует использовать его в текстовой области. Это будет немного странно, если URL-адрес будет случайно записанным, но пока вы не вставляете пробелы, URL-адрес должен быть действительным.
Если ваш веб-сервер отвечает за создание URL-адреса, вы можете попытаться сделать его менее подробным. Вы также можете сэкономить место, если вы можете использовать относительный URL-адрес (пропуская часть домена).
Вы можете просто установить свойство 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">