Question

我正在为网络平台编写文档，我想在我的说明中引用文件上传按钮。但是，按钮上的确切文本取决于浏览器。例如，Firefox称之为Browse...，Chrome称之为Choose File。

<input type="file">

是否可以通过编程方式访问（不更改）该文本？我知道我可以检测浏览器并相应地设置文档中的文本，甚至可以使用解决方法来设置按钮文本，但这不是我要问的。

Answer 1

此文本由浏览器呈现特定HTML元素的方式设置。无法访问或更改该文本。它永远不会加载到DOM中，因此通过jQuery查找也不是一种选择。

对于您的文档，您可能想要解决文本的IE版本，然后列出Chrome，Safari，Firefox等。这是我能想到向用户解释的最佳方式。

修改

我想我会更新并提及Shadow DOM，因为它对我来说很有意思。您可以在Chrome开发者工具中启用此功能 - ＆gt;设置 - ＆gt;显示用户代理shadow DOM。在那里你可以实际查看渲染的控件和设置它的文本。虽然，它无法通过客户端脚本编程方式访问。：（

Answer 2

您可以为input_id使用标签并隐藏输入。

示例：

label {
/*Just to simulate a button, you will put your button style*/
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
}

input {
/*hide the inout*/
  width: 0px;
  outline:none;
  opacity:0;
  visibility:none;
  height:0px;
  display:none;
}

<label for="b1">
    Name
    <input type="file" id="b1">
</label>

工作DEMO。

Answer 3

是否可以通过编程方式访问（不更改）该文本？

<击>否。无法访问.value <input>中<input type="file">元素的ShadowDOM，该.shadowRoot元素以编程方式呈现文本。显示<input type="file">的{{1}} DOM元素的ShadowDOM属性设置为null。

Chrome，chrome在.value元素的<input type="button" value="Choose File" pseudo="-webkit-file-upload-button">属性的ShadowDOM元素<input type="file">处公开了.computedName input type="file"

const UPLOAD_BUTTON_TEXT = document.querySelector("input[type=file]")
.computedName;
console.log(UPLOAD_BUTTON_TEXT);

<input type="file" />

在铬，铬，您可以查看元素

<input type="button" value="Choose File" pseudo="-webkit-file-upload-button">

通过打开host，选择<input type="file">，选中DevTools，然后检查Settings元素，在Show user agent shadow DOM <input type="file">元素处呈现文字。

<input type="file">

如何获取文件上传按钮的文字？

3 个答案: