javascript - 将工具提示添加到文件浏览输入

Question

给定以下代码，自定义按钮鼠标悬停工具提示的最佳方法是什么？在 Chrome 中，工具提示自动设置为“未选择文件”。在 Edge 中没有默认的工具提示。 JavaScript 是必需的吗？

<div id="Dialog--Person">
  <form>
    <input placeholder="Enter First Name..." id="personFirstName" >
    <input placeholder="Enter Last Name..." id="personLastName" >
    <input placeholder="Enter Title..." id="personTitle" >
    <input placeholder="Enter Office Phone..." id="personPhone" >
    <input placeholder="Enter Mobile Phone..." id="personMobile" >
    <input placeholder="Enter Email..." id="personEmail" >
    <input type="file" value="upload" class="form-control" id="personPhoto" name="photo">
  </form>
</div>

Codepen

Answer 1

您需要添加 title 并传递您想要显示的任何值，如下面的概念。它将适用于所有浏览器并在工具提示中显示相同的文本。

<input type="file" value="upload" class="form-control" id="personPhoto" name="photo" title="Please select file."> 

<div id="Dialog--Person">
  <form>
    <input placeholder="Enter First Name..." id="personFirstName" >
    <input placeholder="Enter Last Name..." id="personLastName" >
    <input placeholder="Enter Title..." id="personTitle" >
    <input placeholder="Enter Office Phone..." id="personPhone" >
    <input placeholder="Enter Mobile Phone..." id="personMobile" >
    <input placeholder="Enter Email..." id="personEmail" >
    <input type="file" value="upload" class="form-control" id="personPhoto" name="photo" title="Please select file.">
  </form>
</div>