Add inputMode to IPv4Subnetting- & NumberBaseTool

This commit is contained in:
Kevin Kandlbinder 2022-05-04 16:22:36 +02:00
parent 4c3162e3f5
commit bd36ee221c
3 changed files with 9 additions and 9 deletions

View file

@ -1,6 +1,6 @@
{
"name": "kevins-data-toolbox",
"version": "2.4.4",
"version": "2.4.5",
"private": true,
"dependencies": {
"@loadable/component": "^5.15.0",

View file

@ -92,16 +92,16 @@ const NumberBaseTool = () => {
<BoxMessage icon={<AlertOctagon/>} color="red" hideInPlace={!nanState}>{t("tools.encodings.numberbase.nanWarning")}</BoxMessage>
<label htmlFor="base10-input">{t("tools.encodings.numberbase.decimal")}</label>
<textarea id="base10-input" placeholder={t("tools.encodings.numberbase.decimal")} onChange={(e) => {setInputType("dec"); setInput(e.currentTarget.value);}} value={dec}></textarea>
<textarea id="base10-input" inputMode={"numeric"} placeholder={t("tools.encodings.numberbase.decimal")} onChange={(e) => {setInputType("dec"); setInput(e.currentTarget.value);}} value={dec}></textarea>
<label htmlFor="base16-input">{t("tools.encodings.numberbase.hexadecimal")}</label>
<textarea id="base16-input" placeholder={t("tools.encodings.numberbase.hexadecimal")} onChange={(e) => {setInputType("hex"); setInput(e.currentTarget.value);}} value={hex}></textarea>
<label htmlFor="base8-input">{t("tools.encodings.numberbase.octal")}</label>
<textarea id="base8-input" placeholder={t("tools.encodings.numberbase.octal")} onChange={(e) => {setInputType("oct"); setInput(e.currentTarget.value);}} value={oct}></textarea>
<textarea id="base8-input" inputMode={"numeric"} placeholder={t("tools.encodings.numberbase.octal")} onChange={(e) => {setInputType("oct"); setInput(e.currentTarget.value);}} value={oct}></textarea>
<label htmlFor="base2-input">{t("tools.encodings.numberbase.binary")}</label>
<textarea id="base2-input" placeholder={t("tools.encodings.numberbase.binary")} onChange={(e) => {setInputType("bin"); setInput(e.currentTarget.value);}} value={bin}></textarea>
<textarea id="base2-input" inputMode={"numeric"} placeholder={t("tools.encodings.numberbase.binary")} onChange={(e) => {setInputType("bin"); setInput(e.currentTarget.value);}} value={bin}></textarea>
</div>

View file

@ -232,15 +232,15 @@ const IPv4SubnettingTool = () => {
<div>
<label htmlFor="ipv4-input">{t("tools.networking.common.ipv4addr")}</label>
<div className={styles.combiInput}>
<input ref={ipInput1} id="ipv4-input" placeholder={"192"} onChange={(e) => {setIPPart1(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart1.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput2.current?.focus()}} value={ipPart1} />
<input ref={ipInput1} id="ipv4-input" placeholder={"192"} inputMode={"numeric"} onChange={(e) => {setIPPart1(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart1.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput2.current?.focus()}} value={ipPart1} />
<span>.</span>
<input ref={ipInput2} id="ipv4-input2" placeholder={"168"} onChange={(e) => {setIPPart2(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart2.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput3.current?.focus()}} value={ipPart2} />
<input ref={ipInput2} id="ipv4-input2" placeholder={"168"} inputMode={"numeric"} onChange={(e) => {setIPPart2(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart2.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput3.current?.focus()}} value={ipPart2} />
<span>.</span>
<input ref={ipInput3} id="ipv4-input3" placeholder={"178"} onChange={(e) => {setIPPart3(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart3.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput4.current?.focus()}} value={ipPart3} />
<input ref={ipInput3} id="ipv4-input3" placeholder={"178"} inputMode={"numeric"} onChange={(e) => {setIPPart3(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart3.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput4.current?.focus()}} value={ipPart3} />
<span>.</span>
<input ref={ipInput4} id="ipv4-input4" placeholder={"1"} onChange={(e) => {setIPPart4(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart4.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === "/" || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") subnetInput.current?.focus()}} value={ipPart4} />
<input ref={ipInput4} id="ipv4-input4" placeholder={"1"} inputMode={"numeric"} onChange={(e) => {setIPPart4(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart4.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === "/" || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") subnetInput.current?.focus()}} value={ipPart4} />
<span>/</span>
<input ref={subnetInput} id="subnet-input" placeholder={"24"} onChange={(e) => {setSubnet(e.currentTarget.value);}} value={subnet} />
<input ref={subnetInput} id="subnet-input" placeholder={"24"} inputMode={"numeric"} onChange={(e) => {setSubnet(e.currentTarget.value);}} value={subnet} />
</div>
</div>