Skip to content

Commit

Permalink
Use inputmode="decimal" for numeric inputs (#599)
Browse files Browse the repository at this point in the history 
`inputmode="decimal"` changes the mobile keyboard to a numpad.

https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#aa-decimal
  • Loading branch information
@shrianshChari
shrianshChari authored Feb 14, 2024
1 parent 326e8f2 commit c2cec7d
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 156 deletions.
66 changes: 35 additions & 31 deletions src/honkalculate.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,11 @@
</div>
<div>
<label>Level</label>
<input class="level" value="100" />
<!--
We use inputmode="decimal" so that mobile devices will have a numpad appear when inputting values.
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#aa-decimal
-->
<input class="level" value="100" inputmode="decimal" />
</div>
<div class="hide">
<label>Weight (kg)</label>
Expand All @@ -147,16 +151,16 @@
<label>HP</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="ivs" value="31" />
<input class="ivs" value="31" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="evs" type="number" min="0" max="252" step="4" value="0" />
<input class="evs" type="number" min="0" max="252" step="4" value="0" inputmode="decimal" />
</td>
<td class="gen-specific g1 g2 hide">
<input class="dvs" value="15" disabled="disabled" />
<input class="dvs" value="15" disabled="disabled" inputmode="decimal" />
</td>
<td><span class="total">341</span>
</td>
Expand All @@ -167,16 +171,16 @@
<label>Attack</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="ivs" value="31" />
<input class="ivs" value="31" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="evs" type="number" min="0" max="252" step="4" value="0" />
<input class="evs" type="number" min="0" max="252" step="4" value="0" inputmode="decimal" />
</td>
<td class="gen-specific g1 g2 hide">
<input class="dvs" value="15" />
<input class="dvs" value="15" inputmode="decimal" />
</td>
<td><span class="total">236</span>
</td>
Expand All @@ -203,16 +207,16 @@
<label>Defense</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="ivs" value="31" />
<input class="ivs" value="31" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="evs" type="number" min="0" max="252" step="4" value="0" />
<input class="evs" type="number" min="0" max="252" step="4" value="0" inputmode="decimal" />
</td>
<td class="gen-specific g1 g2 hide">
<input class="dvs" value="15" />
<input class="dvs" value="15" inputmode="decimal" />
</td>
<td><span class="total">236</span>
</td>
Expand All @@ -239,16 +243,16 @@
<label>Sp. Atk</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="ivs" value="31" />
<input class="ivs" value="31" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="evs" type="number" min="0" max="252" step="4" value="0" />
<input class="evs" type="number" min="0" max="252" step="4" value="0" inputmode="decimal" />
</td>
<td class="gen-specific g1 g2 hide">
<input class="dvs" value="15" />
<input class="dvs" value="15" inputmode="decimal" />
</td>
<td><span class="total">236</span>
</td>
Expand All @@ -275,16 +279,16 @@
<label>Sp. Def</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="ivs" value="31" />
<input class="ivs" value="31" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="evs" type="number" min="0" max="252" step="4" value="0" />
<input class="evs" type="number" min="0" max="252" step="4" value="0" inputmode="decimal" />
</td>
<td class="gen-specific g1 g2 hide">
<input class="dvs" value="15" disabled="disabled" />
<input class="dvs" value="15" disabled="disabled" inputmode="decimal" />
</td>
<td><span class="total">236</span>
</td>
Expand All @@ -311,10 +315,10 @@
<label>Special</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td>
<input class="dvs" value="15" />
<input class="dvs" value="15" inputmode="decimal" />
</td>
<td><span class="total">236</span>
</td>
Expand All @@ -341,16 +345,16 @@
<label>Speed</label>
</td>
<td>
<input class="base" value="100" />
<input class="base" value="100" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="ivs" value="31" />
<input class="ivs" value="31" inputmode="decimal" />
</td>
<td class="gen-specific g3 g4 g5 g6 g7 g8 g9">
<input class="evs" type="number" min="0" max="252" step="4" value="0" />
<input class="evs" type="number" min="0" max="252" step="4" value="0" inputmode="decimal" />
</td>
<td class="gen-specific g1 g2 hide">
<input class="dvs" value="15" />
<input class="dvs" value="15" inputmode="decimal" />
</td>
<td><span class="total">236</span>
</td>
Expand Down Expand Up @@ -474,7 +478,7 @@
</div>
<div class="move1">
<select class="move-selector small-select"></select>
<input class="move-bp" value="50" />
<input class="move-bp" value="50" inputmode="decimal" />
<select class="move-type"></select>
<select class="move-cat gen-specific g4 g5 g6 g7 g8 g9">
<option value="Physical">Physical</option>
Expand Down Expand Up @@ -510,7 +514,7 @@
</div>
<div class="move2">
<select class="move-selector small-select"></select>
<input class="move-bp" value="0" />
<input class="move-bp" value="0" inputmode="decimal" />
<select class="move-type"></select>
<select class="move-cat gen-specific g4 g5 g6 g7 g8 g9">
<option value="Physical">Physical</option>
Expand Down Expand Up @@ -546,7 +550,7 @@
</div>
<div class="move3">
<select class="move-selector small-select"></select>
<input class="move-bp" value="0" />
<input class="move-bp" value="0" inputmode="decimal" />
<select class="move-type"></select>
<select class="move-cat gen-specific g4 g5 g6 g7 g8 g9">
<option value="Physical">Physical</option>
Expand Down Expand Up @@ -582,7 +586,7 @@
</div>
<div class="move4">
<select class="move-selector small-select"></select>
<input class="move-bp" value="0" />
<input class="move-bp" value="0" inputmode="decimal" />
<select class="move-type"></select>
<select class="move-cat gen-specific g4 g5 g6 g7 g8 g9">
<option value="Physical">Physical</option>
Expand Down
Loading

0 comments on commit c2cec7d

Please sign in to comment.