input[type="file"].click() didn't work in Safari

Click couldn't be initiated with JavaScript in Safari if the input was
hidden with display: none. Using visibility: hidden or opacity: 0 solves
the problem.

Alternative solution would be to hide (opacity: 0) the input and slide it
(position: absolute; top: 0; left: 0; width: 100%; height: 100%) over the
button, which would work in all browsers, and wouldn't require JavaScript.
This commit is contained in:
Deathamns 2014-10-25 09:50:37 +02:00
parent 54749b31fb
commit 99d8f431d5
4 changed files with 14 additions and 8 deletions

View File

@ -13,7 +13,7 @@
<div>
<p data-i18n="1pFormatHint"></p>
<p><button id="importUserFiltersFromFile" data-i18n="1pImport"></button> &emsp; <button id="exportUserFiltersToFile" data-i18n="1pExport"></button></p>
<input id="importFilePicker" type="file" accept="text/plain" style="display:none;">
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
<textarea class="userFilters" id="userFilters" dir="auto" spellcheck="false"></textarea>
<p><button id="userFiltersApply" disabled="true" data-i18n="1pApplyChanges"></button></p>
</div>

View File

@ -26,7 +26,7 @@
<div style="margin:1em 0 0 0;">
<p><button type="button" id="export" data-i18n="aboutBackupDataButton"></button>
<button type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<input id="restoreFilePicker" type="file" accept="text/plain" style="display:none;">
<input id="restoreFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
<p>
<p><button type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div>

View File

@ -1,9 +1,9 @@
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.fa {
font-family: FontAwesome;
font-style: normal;
@ -64,3 +64,9 @@ body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
85% { opacity: 0; }
100% { opacity: 1; }
}
.hiddenFileInput {
visibility: hidden;
width: 0;
height: 0;
}

View File

@ -13,7 +13,7 @@
<div>
<p data-i18n="whitelistPrompt"></p>
<p><button id="importWhitelistFromFile" data-i18n="whitelistImport"></button> &emsp; <button id="exportWhitelistToFile" data-i18n="whitelistExport"></button></p>
<input id="importFilePicker" type="file" accept="text/plain" style="display:none;">
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
<textarea id="whitelist" dir="auto" spellcheck="false"></textarea>
<p><button id="whitelistApply" type="button" disabled="true" data-i18n="whitelistApply"></button></p>
</div>