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

【问题标题】：Input field does not display value + text alignment issue输入字段不显示值+文本对齐问题
【发布时间】：2020-02-07 15:32:49
【问题描述】：

我正在尝试实现活动文本输入字段。您将文件拖放到其中，字段应显示拖放文件的名称。很简单的任务，呵呵。这是我的代码：

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css input-field

【解决方案1】：

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

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

所以，替换

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

在你的 JavaScript 中使用

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

将解决这两个问题。

【讨论】：

谢谢！像魅力一样工作。
...但是为什么呢？我了解scrollLeft，但是el.value = 'something' 和el.setAttribute('value', 'something') 有什么区别？
我添加了一个解释。如果不清楚，请告诉我。
顺便说一句，您应该像@harry 的回答一样使用原始变量z，而不是再次从DOM 中获取元素。
好吧，实际上代码比这个 jsfiddle 示例更复杂。我只是忘了在这里重用z 变量，同时提取要显示的问题的核心。 :)

【解决方案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();
});

【讨论】：