Поле ввода не отображает значение + проблема выравнивания текста

Question

Я пытаюсь реализовать активное поле ввода текста. Вы помещаете файл в него, и поле должно отображать имя удаленного файла. Довольно простая задача, да. Вот мой код:

https://jsfiddle.net/zmej/jers8hf6/4/

• 1-я проблема: если имя файла длиннее, чем может отображаться поле, пользователь увидит только начало имени файла. Я пытался использовать CSS свойство text-align=right, но оно применяется только к тексту, который вводится вручную . Как я могу настаивать на отображении значения 'tail, всегда?
• 2-я проблема: после ввода любого текста вручную, поле отказывается отображать значение. Вот шаги для воспроизведения: нажмите на поле, нажмите любую клавишу, перетащите файл в поле. Содержимое поля не изменилось, хотя атрибут value действительно был изменен! Просто в поле не отображается новое значение.

Любая помощь будет принята с благодарностью.

Answer 1

При использовании атрибута set для значения добавляется value=”something” к элементу ввода HTML. Это означает, что он устанавливает начальное значение, которое всегда переопределяется любым ручным вводом.

И для прокрутки до конца вы можете использовать JS scrollLeft и установить его в значение в пикселях больше, чем ширина элемента ввода.

Итак, замена

el.setAttribute('value', f.name);

в вашем JavaScript на

el.value = f.name;
el.scrollLeft = 1000;

решит обе проблемы.

Answer 2

Для задачи # 1 вы можете использовать .focus (), и курсор будет установлен в конце.

Для # 2 вы можете использовать getData, попробуйте

const z = document.getElementById('id');

z.addEventListener('drop', (e) => {
  e.preventDefault();
  const value = e.dataTransfer.getData("text");
  z.value= value;
  z.focus();
});