I have a simple HTML file input that I can open with Javascript in Chrome but not in Firefox.
<input type="file" id="fileImportInput" style="display:none">
document.getElementById('fileImportInput').click(); // this works in Chrome but not Firefox
I'm not sure why this won't work in Firefox. I get no console error, etc. In Chrome the file browser opens and I can select my file no problem. Any ideas?
Thanks.
Edit: just to note that if I remove the display:none style from the input it makes no difference.
I actually got it working. Firefox has a default setting enabled to block pop ups. Just go to Options and check it off. Strange that it includes file dialogs in it's block list.
https://support.mozilla.org/en-US/kb/pop-blocker-settings-exceptions-troubleshooting#w_is-the-pop-up-blocker-on-and-enabled-for-this-sitehttps://support.mozilla.org/en-US/kb/pop-blocker-settings-exceptions-troubleshooting#w_is-the-pop-up-blocker-on-and-enabled-for-this-site
I am developing a WebApp and want to create a kind of login screen with html. For this I have four input fields, which focus on the next field after a number has been typed in.
In osX safari this works without any problems. Unlike iOS on my iPhone. Yoo-hoo.
The problem on mobile safari is that I don’t know how to automatically "jump" to the next input field programatically (set the focus programmately). The user can do it via a button (working fine), but is there a way to do this automatically?
See my code:
$('.text').on('input', function() {
$(this).next('input').focus()
});
.text {
margin: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="text" />
<input type="text" class="text" />
<input type="text" class="text" />
<input type="text" class="text" />
The focus is working quite fine on webBrowsers like safari or chrome but not for iPhone iOS safari like to can see in this gif - The focus get's lost and the keyboard disappears:
What I've found during my research was e.g this question:
Programmatically focus on next input field in mobile safari
Mobile Safari: Javascript focus() method on inputfield only works with click?
But none of the answers did the job for me because whether they are not working / they are to jerky or they use a workaround that is not really working with my styles like http://jsfiddle.net/EbU6a/194/ did.
So any help how to fix this would be really appreciated. Thanks in advance!
Since I am pretty sure that someone will get this problem too, I decided to answer my own question.
So I've fixed the issue partly using this line of code:
myWebView.keyboardDisplayRequiresUserAction = false
I found the solution while reading the apple documentation for UIWebView.
Please see this reference.
I am affraid iOS does not allow you to focus programatically. You can try workaround from here
This is basically and simplified what I have now:
<style>
form.noshow { height: 0; overflow: hidden; }
</style>
<form class=noshow target="SomeIframeThatExists">
<input type=file id=uf>
</form>
<a id=uflink href="/user/photo">Upload photo</a>
<script>
$('uf').addEvent('change', function(e) {
// alert('oele'); // this would work fine
this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
$('uf').click(); // opens file dialog in all browsers inc IE
return false;
});
</script>
What it does (perfectly) in Chrome 11 and FF 4:
The form is hidden.
You click the link
Choose file dialog opens
You select a file
Dialog closes
Form is submitted
Script in iframe is executed and photo is replaced
Very hightechlike and sweet.
In IE, all of that works, except [6]. The form isn't submitted. Javascript error: "Access denied". Doesn't matter how the form is invisible, as long as the dialog was opened with input.click() the form can't be submitted on change. (The onchange function is executed fine. The error only occurs when form.submit() is called.)
Now all of this I can accept. IE sucks. I live with it.
My solution so far was to check the navigator for "MSIE" and then when clicking the link instead of opening the dialog, showing the form (with the file input). Then the user has to click the actual, ugly file input and then everything works fine. But ugly.
The question is twofold:
Is there a way to do this in IE as cool as it is in Chrome? WITHOUT nasty flash/java crap. Only html elements andjavascript.
If not: is there a way to check for form.submit() support after opening the dialog from a link (besides !navigator.contains("MSIE"))?
[2] could be catching the "Access denied" exception thrown in IE, but then it's too late: the user has already opened the dialog and browsed to the photo. You don't wanna make him do that again. (Even IE users don't deserve that.)
PS. I'm only interested in Chrome 10+, Firefox 3.6+ and IE8+.
PS. Might be important: the file input element can't be anywhere near the link, because the link is inside a form and that form is (must be) separate from the file upload form.
UPDATE
Second best: detect support for this high-techlike behaviour that only doesn't work in IE. I don't wanna use navigator.appName.contains('MSIE') because that's not flexible and not necessarily true.
#Rudie, up here - Thanks for that code! It works great in IE and Chrome, but not in FireFox.
I managed to take my old code (That works in FF and Chrome) and combined your code for MSIE.
Check it out here:
FIX FOR IE, CHROME AND FIREFOX
https://gist.github.com/4337047
PROBLEM:
When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form.
If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.
Please note that IE11, as of now, is allowing the form to submit if a file input field has changed via a scripted 'click' event.
Solution
(partly thanks to Rudie # Stackoverflow, https://stackoverflow.com/users/247372/rudie , http://hotblocks.nl/):
Make a label for the input in IE. If you click it, it will force a click on the input field - and IE will accept that (dumbass IE thinks user clicked the input field, hah)
So in that label we'll put our own styled DIV.
Next problem was, this doesn't work in FF. So we made a simple (possible nasty) browser check, and based on the browser we'll show a different button.
Solution is right here. Tested in:
Win 7 x64
FireFox 13.01
Chrome 23.0.1271.97 m
IE9 in regular IE9 mode
More tests / additions to code are MORE than welcome!
EDIT:
To quote Roy McKenzie
IE11 is now allowing the form to submit if a file input field has changed via a scripted 'click' event.
I did it!!
http://jsfiddle.net/rudiedirkx/8hzjP/show/
<label for="picture">Upload picture</label>
<input type="file" id="picture" style="position: absolute; visibility: hidden" />
IE8 works. I don't care about others.
So easy =)
Strange indeed, IE8 block the submission only if there's enctype="multipart/form-data" in the form.
One workaround that worked for me locally is adding "real" submit button e.g.
<input type="submit" id="btnSubmit" value="Submit" />
Then have such code to submit:
$('btnSubmit').click();
If this works you can probably hide the button with CSS to make it transparent to the user.
Well, this is the EXACT same problem I'm having right now. And only (disgusting) hack that did solve is to make the input[type=file] quite big with CSS, make it alpha=0 and put it on top of your intended UI element.
In short, you're making the user click the ugly "browse" button without him/her realizing.
Try adding the tag enctype="multipart/form-data" to your form element.
I'm trying to make a jquery tooltip that appears when a user mouses over a link. In my case the link is using display:block style so that it covers a large area. It works perfectly in Chrome and Firefox but in Internet Explorer it doesn't work at all. The tooltip doesn't show, the browsers own tooltip shows etc... IE!!!!
http://pastebin.com/1kBaMujV
Any ideas? Got to love internet explorer...
Ok well i took your advice and went for a pre existing one using jQueryTools from flowplayer. This is the result:
http://pastebin.com/gxSQx64B
Works great in chrome, firefox and internet explorer. I guess it is best to use one that is mature. The only thing that still annoys me is in firefox if you click on the link then click the browser back button, the tooltip is statically displayed over the link area until you move the mouse back over the link area. This doesn't happen with the other browsers.
Which version of IE you are using? In IE 8 it is fine.
Im having a little problem with jCarousel ( http://sorgalla.com/projects/jcarousel/ ).
Everything works fine in Firefox and IE, however in Safari the carousel displays but the next button is inactive when there are actually more elements. Firefox and IE show the next button as active.
Is there a common fix for this or a known bug in jCarosuel?
Thanks!
Oops, found the solution.
http://groups.google.com/group/jquery-en/browse_thread/thread/8f30314e21bbaa6f
Nice to know the author doesn't upkeep the code.