输入字段不显示值+文本对齐问题

Question

我正在尝试实现活动文本输入字段。您将文件拖放到该文件，并且字段应显示被删除文件的名称。非常简单的任务，呵呵。这是我的代码：

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

• 第一个问题：如果文件名比字段可以显示的长，则用户将只能看到文件名的开头。我尝试使用CSS属性text-align=right，但它确实适用于[[仅适用于手动输入的文本。如何始终坚持显示价值的尾巴？
手动输入任何文本后，
• 第二个问题：
，在字段[[refuses中显示值。重现步骤如下：单击字段，按任意键，将文件拖放到该字段。尽管value属性确实已更改，但字段内容未更改！只是该字段没有显示它的新值。

任何帮助将不胜感激。

Answer 1

对于＃2，您可以使用getData试试这个

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

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

Answer 2

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

在您的JavaScript中具有

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

将解决两个问题。