Como dividir um Input Text em 6

Programação
#1

Alguém sabe como faço pra separar o Input text dessa forma?

image

Seria basicamente 1 input, ou 6 que se unem para enviar para o banco de dados. Valeu.

#2

Acho que seria 6 inputs mesmo. Se os valores dos 6 inputs formarem uma coisa só, basta vc fazer a concatenação.

3 curtidas
#3

Sim, finalizei. Estou trabalhando com Blazor, no caso C#.

Ficou assim:

<form method="POST">
                    <!-- <input required placeholder="" type="text" id="n1"/> -->
                    <input id="n1" maxlength="1" type="text" value="@numericBoxOne" disabled/>
                    <input id="n2" maxlength="1" type="text" value="@numericBoxTwo" disabled/>
                    <input id="n3" maxlength="1" type="text" value="@numericBoxThree" disabled/>
                    <input id="n4" maxlength="1" type="text" value="@numericBoxFour" disabled/>
                    <input id="n5" maxlength="1" type="text" value="@numericBoxFive" disabled/>
                    <input id="n6" maxlength="1" type="text" value="@numericBoxSix" disabled/>
                    <br>
                    <!-- Clear -->
                    <input type="button" value="Clear" class="clear-serial" @onclick="clearNumericButtonButtonCb">
                    <div class="input-numbers">
                        <button type="button" @onclick="numericButtonZeroClickCb"   value="0">0</button>
                        <button type="button" @onclick="numericButtonOneClickCb"    value="1">1</button>
                        <button type="button" @onclick="numericButtonTwoClickCb"    value="2">2</button>
                        <button type="button" @onclick="numericButtonThreeClickCb"  value="3">3</button>
                        <button type="button" @onclick="numericButtonFourClickCb"   value="4">4</button>
                        <button type="button" @onclick="numericButtonFiveClickCb"   value="5">5</button>
                        <button type="button" @onclick="numericButtonSixClickCb"    value="6">6</button>
                        <button type="button" @onclick="numericButtonSevenClickCb"  value="7">7</button>
                        <button type="button" @onclick="numericButtonEightClickCb"  value="8">8</button>
                        <button type="button" @onclick="numericButtonNineClickCb"   value="9">9</button>
                    </div>
                </form>

Obrigado!

2 curtidas
#4

Tem como fazer estilo pin também, pra a pessoa digitar direto do teclado normal:

https://jsfiddle.net/rodriguesabner/y1dgqe6u/148/

2 curtidas
#5

Olá… usei esta solução de um modo parecido, mas não consegui fazer um CTRL C + CTRL V nos inputs. Por exemplo: tenho 6 digitos e quero colar automaticamente no 6 inputs… é possível?