I would like to focus on a text input field immediately on page load. However the following code, that works on desktop browsers, doesn't work on mobile Safari (on iOS 6).:
<input type="text" name="q" class="search" id="focusme" />
...
<script type="text/javascript">
window.onload=function(){var a=document.getElementById("focusme");a.focus();}
</script>
I have tried to implement several suggested fixes for this. However I haven't been able to get it working. It does display the CSS changes to the field when it is in focus, however the keyboard is not brought up.
I suspect this may be due to my currently very limited understanding of JavaScript, but I think it may still be a bug in Safari.
The question:
In Safari on iOS 6, Do you know of any way to auto focus on a text input field on page load?
Thank you for your help :-)
Update:
The page does have jquery and mobile-jquery available, if they need to be used.
Why using JavaScript? <input type="text" autofocus /> should do it!
Related
Hello Stackoverflow people,
Background:
I am building a privacy search engine at motherpipe.co.uk. I am adding functionality to the search box that allows a user to erase the text they have written with one click on the X to the right side in the searchbox. This is done by adding HTML5 functionality type="search".
Problem:
The code works on PC but not on Iphone and Ipad. The X does not show up. See https://motherpipe.co.uk/mobile/.
Question:
What do I need to change to get the X to appear and work correctly in Safari on iOS?
Any help much appreciated. Current HTML:
<form name="searchform" id="theform" action="search.php" method="GET" />
<input type="search" id="tag" class="textbox" name="q" autocomplete="off"/>
There doesn't appear to be anything in the HTML5 spec that requires the field-clear button. It is a feature that some browsers have added, but is not required. From the HTML5 spec -
The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.
So, it isn't that the search field doesn't "work" - it will collect text and submit it to your server, its just that it has a different appearance between browsers.
In a quick test, Safari and Chrome on OSX added the "x" while Firefox did not, but all browsers submitted the data.
So I want to use a document upload element in a web form using JQuery Mobile. Every mobile platform in my testing environment allows it, (only small additional styling is allowed but some none the less) until I come to IE and IE Mobile. It is all scew-whiff in both and doesn't function at all in IE Mobile.
Am I missing some secret documentation or am I being stupid expecting IE to behave like others... I am going to guess that yet again, they are laughing in the face of conformity.
Thank you for any input and advice.
In regards to code, I am not using anything fancier then:
<input name="exampleName" class="exampleClass" id="exampleDocument" type="file" size="250" value=""/>
<!--and Jquery Mobile changes the class name to input ui-input-text ui-body-a-->
IE for Windows Phone 7/8 as like iOS 5 and lower don't support file upload from web browser. File Upload Support
this is my first question on Stackoverflow, so please don't hate me for missing anything :)
I am currently trying to build a Phonegap application using jQuery Mobile.
At this point I'm having issues handling Time inputs. I need the input to only offer 15-minute steps. I've tried the DateBox plugin which offers this functionality. My code looks as follows:
<input name="txtAfzEnde" id="txtAfzEnde" type="text" data-role="datebox"
data-options='{"mode":"timeflipbox", "minuteStep":"15", "useFocus":true}' />
However on an iPhone it's not possible to switch to this input using the "Prev/Next" Buttons.
So my question is:
Is it possible to use the standard HTML-inputs like
<input name="mytime" id="mytime" type="time" />
with any customizing options to use a 15-minute step? I'm imagining something like:
<input name="mytime" id="mytime" type="time" data-options='{"minuteStep":"15"}'/>
I'd like it to use the native timepicker so it integrates well with the other UI elements.
If something like this is not possible, please suggest a plugin that allows me to customize it in the needed way and also integrates well with native UI inputs.
Greets,
Philip
I have a mobile site that uses the jQuery Mobile library along with html5. On this site I have made use of placeholders to label inputs (as I have hidden the labels).
However we all know that IE are inept and didn't support placeholders until IE10 but my client wants this to also work in IE9 (why he would want support for this on a mobile site is beyond me).
I have downloaded and installed the latest version of the modernizr script yet the placeholders still don't show up. Is there anything I need to do to make this work?
My included scripts:
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
Example html input
<input class="textbox" data-val="true" data-val-length="The field Surname * must be a string with a maximum length of 150." data-val-length-max="150" data-val-required="Please enter your surname." id="Surname" name="Surname" placeholder="Surame *" type="text" value="" />
Example Fiddle
Modernizr does not add the placeholders or any other functionality to old browsers.
Modernizr is simply a script that allows you to tell whether a browser supports any given feature or not. You still need to act on the information that Modernizr gives you, and implement the placeholder functionality if Modernizr tells you that it isn't supported.
Modernizr even provide a wiki page that lists a load of Polyfill scripts you can use for various features: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Pick one of the placeholder scripts from that page, and do something like this:
Modernizr.load({
test: Modernizr.input.placeholder,
nope: 'placeholder-polyfill.js'
});
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.