输入类型=“文件”造型帮助

发布于 2024-10-17 09:08:03 字数 1118 浏览 2 评论 0原文

我有一个带有 opacity: 0; 和 filter: alpha(opacity: 0); 的文件输入字段，它位于一个大 div 的顶部，我用它作为选择按钮文件，所选文件名显示在按钮下方。

一切正常，但是当您在 IE 中设置文件元素的 width 属性（在本例中，是其下方的 DIV 的宽度）时，该宽度的一部分是文件的文本区域。文件输入。当然，IE 会做自己的事情，与其他浏览器不同，必须双击元素的文本区域才能打开浏览对话框。火狐浏览器Safari 将在单击元素的文本部分时执行操作。我认为我有一个解决方法，因为 IE 允许您调用元素上的 .click() 事件。

我尝试了这个：

<input type="file" onclick="this.click();" />

它什么也没做，所以我尝试了这个：

<input type="file" onmouseup="this.click();" />

它有效，并且只需单击元素的文本区域即可显示浏览对话框。但是，由于某种原因，当提交表单时，如果选择了一个文件，则该表单将不会提交，也不会发生任何事情。如果未选择任何文件，则将提交表格的其余部分。

所以现在我回到第一个方块，必须双击“选择文件”按钮的左半部分来选择文件，而右半部分可以单击。我想不出任何其他方法可以让 IE 对元素的单击做出反应。我尝试使用 onfocus 事件来触发元素上的 .click() ，这也有效，但由于此上传对话框将是页面上唯一的内容，并且是第一个被渲染的输入元素，页面加载时会触发 click 事件。

因此，然后我尝试附加到正文的 onload 事件，并将焦点设置到其他内容，但是为时已晚，焦点已经分配给文件输入并且浏览对话框已经打开。我知道我已经接近 onfocus，有没有办法在页面加载时阻止元素获得焦点？或者还有其他任何人都能想到的方法来做到这一点吗？

谢谢！

[更新]

我再次尝试使用 onfocus，不幸的是，我错了，提交表单时焦点再次被调用到文件元素，停止提交并再次打开浏览对话框

原文

I have a file input field with opacity: 0; and filter: alpha(opacity: 0); that sits ontop of a large div that I use as a button to select a file, the selected filename is displayed below the button.

All works fine, but when you set the width property of the file element (in this case, the width of the DIV which is underneath it) in IE, part of that width is the text area of the file input. Ofcourse, IE does their own thing, and unlike every other browser, the text-area of the element has to be double-clicked to open the browse dialog. Firefox & Safari will act on a single-click of the text part of the element. I thought I had a workaround since IE allows you to invoke the .click() event on the element.

I tried this:

<input type="file" onclick="this.click();" />

which did nothing, so I tried this:

<input type="file" onmouseup="this.click();" />

Which worked, and the browse dialog was shown with a single click of the text area of the element. But, for some reason when the form is submitted, if there was a file selected, the form would not submit, nothing would happen. If no file was selected, the rest of the form would be submitted.

So now I am back to square one and the left half of my Select File button has to be double clicked to pick a file and the right half can be single clicked. I can't think of any other way to get IE to react to a single click of the element. I tried using the onfocus event to trigger .click() on the element also, which works, but since this upload dialog will be the only thing on the page, and the <input type="file" /> is the first input element being rendered, the click event is triggered when the page loads.

So then I tried attaching to the onload event of the body, and setting focus to something else, but this was too late and focus had already been given to the file input and the browse dialog already opened. I know I am getting close with the onfocus, is there a way to keep the element from having focus when the page loads? Or is there another way to do this that anyone can think of?

Thanks!

[update]

I tried playing with the onfocus again and unfortunately, I was wrong and focus is called to the file element again when the form is submitted, halting the submission and opening the browse dialog again

分享到QQ

分享到微博