2011-02-14 86 views
1

我有一個文件輸入字段opacity: 0;filter: alpha(opacity: 0);,它位於一個大div的頂部,我用它作爲選擇文件的按鈕,所選文件名顯示在按鈕下方。輸入類型=「文件」樣式幫助

所有工作正常,但是當您在IE中設置文件元素的width屬性(在這種情況下,它下面的DIV的寬度)時,該寬度的一部分是文件輸入的文本區域。當然,IE做他們自己的事情,並且不同於其他任何瀏覽器,元素的文本區域必須被雙擊才能打開瀏覽對話框。 Firefox & Safari將單擊該元素的文本部分。我認爲我有一個解決方法,因爲IE允許你調用元素上的.click()事件。

我嘗試這樣做:

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

它什麼也沒做,所以我想這:

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

哪些工作,並與該文本區域的一個單一的點擊結果顯示瀏覽對話框元件。但是,由於某種原因,當表單被提交時,如果選擇了一個文件,表單不會提交,則不會發生任何事情。如果沒有選擇文件,表單的其餘部分將被提交。

所以現在我回到原點了,我的選擇文件按鈕的左半部分必須雙擊選擇一個文件,右半部分可以單擊。我想不出任何其他方式讓IE瀏覽器對元素的單擊作出反應。我嘗試使用onfocus事件觸發.click(),該元素也可以工作,但由於此上傳對話框將是頁面上的唯一內容,並且<input type="file" />是第一個要呈現的輸入元素,因此當頁面負載。

因此,我試着附加到身體的onload事件,並將焦點設置爲其他內容,但是這太遲了,焦點已經被賦予文件輸入並且瀏覽對話框已經打開。我知道我正在接近焦點,有沒有一種方法可以在頁面加載時保持元素不被焦點?還是有另一種方法可以做到這一點,任何人都可以想到?

謝謝!

[更新]

我試圖用的onfocus玩一次,不幸的是,我錯了,重點是打電話時再提交表單文件元素,停止提交併重新打開瀏覽對話框

+0

我認爲所有這些問題都是由`input [type = file]`的安全措施造成的。 – alex 2011-02-14 01:52:25

+0

嗯,那不是真的,是的,他們使文件輸入元素無法通過腳本進行多次交互以實現安全措施。這就是爲什麼你設置不透明度爲0,並將文件輸入放置在樣式化區域。我不認爲它的安全措施會導致這個問題。它與提交表單時再次觸發onmouseup事件有關。如果我只是在頁面的其他按鈕上添加另一個按鈕並指定其單擊事件以觸發點擊文件元素,則一切正常。 – 2011-02-14 01:59:39

回答