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*">
Related
In the Ionic 3 app, for numeric fields, the numeric keypad is not appearing in iOS devices. For input type number, the numbers are displaying in the first row of a keypad along with the alphabets. In Android, it's working fine. I tried with angular pattern \d* and inputmode="numeric" still its not working.
<input type="number" pattern="[0-9]*" inputmode="numeric">
I usually use
<ion-input type="tel" pattern="[0-9]*" style="-webkit-text-security:disc"></ion-input>
-webkit-text-security:disc
to cover the input.
For those using ionic 4 and higher this is the best solution
<ion-input type="text" inputmode="tel"></input>
The key is the inputmode, that defines the keyboard that is shown. Leaving type=text allows me to allow other keys like "(" or "-" in the phone number field if needed.
See here for details: https://ionicframework.com/blog/keyboard-improvements-for-ionic-apps/
Try:
<ion-input type="number" pattern="[0-9]*"></ion-input>
or
<ion-input type="number" pattern="\\d*"></ion-input>
Try
<ion-input type="tel"></ion-input>
I am working on an web /hybrid mobile application using Meteor + React. I have multiple input fields with type number. Everything works fine for Android and Web but not for iOS.
I have this sample code (React Component)
<InputBox containerClassName="input-field gray-border center"
autoComplete="off"
className="validate center-align"
type="number" name="currentWeight" unit="kgs"
value=""/>
What may be causing this one, and how can I fix this one? I've been scratching my head through this for some hours, considering I also have searched for other solutions to no avail. Thanks in advance
Give step="0.01" to support 2 decimal number
<InputBox containerClassName="input-field gray-border center"
autoComplete="off"
className="validate center-align"
type="number" step="0.01" name="currentWeight" unit="kgs"
value=""/>
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"/>
I am working on JQuery Mobile Datebox and there is something i can't fix. If user type some weird input in year area something like 1988123, datebox gets crazy and changes value of date "undefined, undefined NaN, NaN".
I tried the get only year value from Datebox, but day, month or year area doesn't have id field. So I couldn't get any solution. Can anybody help me?
try HTML5 pattern:
<form
onsubmit="alert('Submitted.');return false;">
<input
type="text"
required=""
pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
value=""
name="dates_pattern2"
id="dates_pattern2"
list="dates_pattern2_datalist"
placeholder="Try it out.">
<input
type="submit"
value="ยป">
<datalist
id="dates_pattern2_datalist"></datalist>
</form>
Finally I did find a solution.
As you know, JQuery Mobile Datebox has some data-options. I find an option which is "maxYear".
<input name="tarih1" id="tarih1" type="date" data-role="datebox" data-options='{"mode": "datebox", "maxYear":"3000"}' placeholder="GG.AA.YYYY">
With this solution, user can't choose a year which has more than 4 digit. (You can change 3000 to another 4 digit year. Bu don't forget, if you choose for example 1999, user can't choose greater than 1999)
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.