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

我正在尝试实现活动文本输入字段。您将文件拖放到其中，该字段应显示拖放文件的名称。很容易，嗯。这是我的密码：

第一个问题：若文件名比字段显示的长度长，用户将只看到文件名的开头。我尝试使用CSS属性text align=right，但它只适用于手动输入的文本。我怎么能一直坚持展示价值的尾巴呢？ 第二个问题：手动输入任何文本后，字段拒绝显示值。以下是复制的步骤：单击字段，按任意键，将文件放到字段中。字段内容没有改变，尽管值属性确实改变了！只是字段没有显示它的新值。

---

任何帮助都将不胜感激。

对于问题1，您可以使用。聚焦，它将在最后设置光标

对于2，您可以使用getData尝试以下操作

const z=document.getElementById'id'； z、 addEventListener'drop'，e=>{ e、 防止违约； const value=e.dataTransfer.getDatatext； z、 价值=价值； z、 重点； };

---

对于问题1，您可以使用.focus，它将在最后设置光标

对于2，您可以使用getData尝试以下操作

const z=document.getElementById'id'； z、 addEventListener'drop'，e=>{ e、 防止违约； const value=e.dataTransfer.getDatatext； z、 价值=价值； z、 重点； };

---

当对value使用set属性时，它将value=“something”添加到HTML输入元素中。这意味着它设置的初始值总是被任何手动输入覆盖

要滚动到最后，可以使用JS scrollLeft并将其设置为大于输入元素宽度的像素值

那么，替换

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

在JavaScript中使用

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

---

将解决这两个问题。

当对value使用set属性时，它将value=“something”添加到HTML输入元素中。这意味着它设置的初始值总是被任何手动输入覆盖

要滚动到最后，可以使用JS scrollLeft并将其设置为大于输入元素宽度的像素值

那么，替换

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

在JavaScript中使用

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

---

将解决这两个问题。

谢谢！工作起来很有魅力……但为什么？我理解这个东西，但是el.value='something'和el.setAttribute'value'，'something'之间有什么区别呢？我添加了一个解释。如果不清楚，请告诉我。顺便说一句，您应该像@harry的答案一样使用原始变量z，而不是再次从DOM获取元素。实际上，代码比这个JSFIDLE示例更复杂。在提取要显示的问题核心时，我刚刚忘记在这里重用z变量：非常感谢。工作起来很有魅力……但为什么？我理解这个东西，但是el.value='something'和el.setAttribute'value'，'something'之间有什么区别呢？我添加了一个解释。如果不清楚，请告诉我。顺便说一句，您应该像@harry的答案一样使用原始变量z，而不是再次从DOM获取元素。实际上，代码比这个JSFIDLE示例更复杂。在提取要显示的问题核心时，我刚刚忘记在这里重用z变量：