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

Question

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

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

如有任何帮助，我们将不胜感激。

Answer 1

对于问题 #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();
});

Answer 2

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

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

所以，替换

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

在你的 JavaScript 和

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

将解决这两个问题。

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

Input field does not display value + text alignment issue

html

javascript

css

input-field