Mobile Number Keypad Input with Dashes, Asterick, etc - ios

I thought I had the whole numeric keypad down and tested on ios 7. But I can't get the dashes, decimals or astericks button to appear.
Here is the code I thought would work:
<input type="number" pattern=[0-9]* inputmode=numeric name="rx1" id="rx1" class="single fldrequired" value=""/>
However, it does not give the option to have dashes, decimals, astericks, etc. I expected it to be in the lower left corner of the keypad, but no such luck. I've tried different variations such as:
<input type="text" pattern=[0-9]* name="rx1" id="rx1" class="single fldrequired" value=""/>
<input type="number" pattern="\d*" name="rx1" id="rx1" class="single fldrequired" value=""/>
<input type="text" pattern="\d*" name="rx1" id="rx1" class="single fldrequired" value=""/>
None of them have produced the button for the extra characters. So for now, I'm just using:
<input type="number" name="rx1" id="rx1" class="single fldrequired" value=""/>
Is this an ios 7 thing or am I just doing something completely wrong. I tried "tel" as well, but that wasn't really what I was looking.
Thanks.

Related

iOS reverting to expanded keyboard on certain pattern inputs

I'm trying to design an input that is limited to 8 characters of any value 0 through 9. Seems simple enough, right?
So, I use this:
<input type="number" id="test4" min="0" max="99999999" pattern="\d*">
And things work perfectly - with a simple caveat. The max number is not being respected. So, I tried these:
<input type="number" id="test2" min="0" max="99999999" pattern="\d{0,8}">
<input type="number" id="test3" min="0" max="99999999" pattern="[0-9]{0,8}">
Both of these two revert the iOS keyboard back to the expanded entry and not just the 10 digits. What am I missing? How can I get this input to display the 10-digit iOS keyboard and also be restricted to 8 digits?
(I know that I could simply use JS to cap the entry, but I was trying to avoid that)
Thanks,
This seems to work:
<input type="text" maxlength="8" pattern="\d*">

stop remember me popup in chrome using java-script

i want to stop popup remember me box in asp mvc (programmatically) i tried autocomplete=off place password text-box and set it hidden but no solution is working.
Tried
autocomplete="off"
Tried
<input type="password" autocomplete="off" />
Tried
<form id="loginForm" action="login.cgi" method="post" autocomplete="off">
Tried
<input style="display:none">
<input type="password" style="display:none">
None of this working please guide me

Support for input type number in iOS devices (iPad)

i have following snippet to be used: <input class="myRiderbox riderfonts" data-role="none" id="pre" type="number" name="quantity" min="1" max="5" value="" required>
But, does this work on iPad and android tablet? I have tested on iOS 6 iPad simulator and mozilla. It did not work. So what is the alternative for this?
Thanks
Use this:
<input type="number" pattern="\d*"/>

grails: select like numeric up down

I've searched around the net but I have not found a solution.
Is there something like numeric up down, for numeric selection in Grails?
How can I create it?
You can achieve your requirement via simple html as:
<input type="number" name="quantity">
you can set range also as:
<input type="number" name="quantity" min="1" max="5">
and If you want you can add value attribute to be shown as:
<input type="number" name="quantity" min="1" max="5" value="${domainInstace.attribute}">
and Enjoy.......
Within a gsp ?
<g:select id="orderby" name="orderby" from="${1..10}" noSelection="['':'-Define Display Order 1 top 10 bottom-']" required="" value="${youdomainClassInstance?.orderby}" class="many-to-one"/>

jquery mobile - datebox appears too much on the left

I'm using jQuery 1.7.2 and jqm-datebox 'stable'.
Code:
<label class="ui-input-text ui-hidden-accessible" for="date">Date</label>
<input jql id="date" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" type="text" value="" name="date" data-role="datebox" data-options='{"mode": "calbox", "calStartDay": 1}'></input>
When I click on the little icon, though, the calendar box appears too much to the left, as in picture. This is particularly evident on a mobile device.
If I reduce the width of the window it goes even further left.
The element.style (especially the left attribute) appears to be calculated on the fly, depending on the width, but I can't manage to find where, neither in the css, nor in the js.
I saw this question, kinda similar to mine, but I don't find it applicable to my case.
How should I go to make the box show in its entirety?
From the docs:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode":"calbox", "centerHoriz": true}'>
The centerHoriz option will get you what you want.

Resources