如何分區輸入字段以在屏幕上顯示為單獨的輸入字段？

Question

看圖：

我想要設計類似於圖像中的內容，其中用戶需要輸入 4 位數字一次性密碼 (OTP)。 現在我已經通過 4 個單獨的輸入實現了這一點，然后在 javascript 中組合值：

<input type="text" class="form-control" placeholder="0" maxlength="1"  />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />

我不確定這是否是正確的方法。 我認為必須有一些樣式選項，通過這些選項，一個輸入文本框會像圖像中一樣顯示為分區。 是否可以使用引導程序？ 如何設置一個輸入控件的樣式以顯示為輸入的分區字段？

Answer 1

您不必保留 4 個單獨的字段；

首先你應該調整字符間距，然后調整底部的邊框樣式......

 #partitioned { padding-left: 15px; letter-spacing: 42px; border: 0; background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 50px 1px; background-repeat: repeat-x; background-position-x: 35px; width: 220px; }

 <input id="partitioned" type="text" maxlength="4" />

--編輯以修復 4 個字符丑陋的 5 個下划線--

 var obj = document.getElementById('partitioned'); obj.addEventListener('keydown', stopCarret); obj.addEventListener('keyup', stopCarret); function stopCarret() { if (obj.value.length > 3){ setCaretPosition(obj, 3); } } function setCaretPosition(elem, caretPos) { if(elem != null) { if(elem.createTextRange) { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if(elem.selectionStart) { elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else elem.focus(); } } }

 #partitioned { padding-left: 15px; letter-spacing: 42px; border: 0; background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 50px 1px; background-repeat: repeat-x; background-position-x: 35px; width: 220px; min-width: 220px; } #divInner{ left: 0; position: sticky; } #divOuter{ width: 190px; overflow: hidden; }

 <div id="divOuter"> <div id="divInner"> <input id="partitioned" type="text" maxlength="4" /> </div> </div>

我認為這可以是一個起點...希望這會有所幫助...

Answer 2

我知道這個問題很老了。 當我試圖為我的項目實現同樣的目標時，我偶然發現了這一點。

我找不到我需要的東西。 所以我用這里的想法自己做了一個

只要所有輸入字段都在id="otp"的div內，您可以將其與任意數量的字符一起使用，並且不需要在 javascript 中進行更改。

---

這是一個預覽：

---

看看這里的代碼

 function OTPInput() { const inputs = document.querySelectorAll('#otp > *[id]'); for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('keydown', function(event) { if (event.key === "Backspace") { inputs[i].value = ''; if (i !== 0) inputs[i - 1].focus(); } else { if (i === inputs.length - 1 && inputs[i].value !== '') { return true; } else if (event.keyCode > 47 && event.keyCode < 58) { inputs[i].value = event.key; if (i !== inputs.length - 1) inputs[i + 1].focus(); event.preventDefault(); } else if (event.keyCode > 64 && event.keyCode < 91) { inputs[i].value = String.fromCharCode(event.keyCode); if (i !== inputs.length - 1) inputs[i + 1].focus(); event.preventDefault(); } } }); } } OTPInput();

 @import url('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'); .form-control { -webkit-transition: none; transition: none; width: 32px; height: 32px; text-align: center } .form-control:focus { color: #3F4254; background-color: #ffffff; border-color: #884377; outline: 0; } .form-control.form-control-solid { background-color: #F3F6F9; border-color: #F3F6F9; color: #3F4254; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .form-control.form-control-solid:active, .form-control.form-control-solid.active, .form-control.form-control-solid:focus, .form-control.form-control-solid.focus { background-color: #EBEDF3; border-color: #EBEDF3; color: #3F4254; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }

 <div class="mb-6 text-center"> <div id="otp" class="flex justify-center"> <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="first" maxlength="1" /> <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="second" maxlength="1" /> <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="third" maxlength="1" /> <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="fourth" maxlength="1" /> <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="fifth" maxlength="1" /> <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="sixth" maxlength="1" /> </div> </div>

Answer 3

這對我有用，沒有任何額外的 javascript 代碼。

 #partitioned { padding-left: 15px; letter-spacing: 42px; border: 0; background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 50px 1px; background-repeat: repeat-x; background-position-x: 35px; width: 220px; min-width: 220px; } #divInner{ left: 0; position: sticky; } #divOuter{ width: 190px; overflow: hidden; }

 <div id="divOuter"> <div id="divInner"> <input id="partitioned" type="text" maxlength="4" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\\..*)\\./g, '$1');" onKeyPress="if(this.value.length==4) return false;"/> </div> </div>

Answer 4

希望此解決方案對您有所幫助。 如果需要，您可以從輸入元素中刪除onfocus事件。

 <body> <head> <style> input[type=number] { height: 45px; width: 45px; font-size: 25px; text-align: center; border: 1px solid #000000; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } </style> <script> function getCodeBoxElement(index) { return document.getElementById('codeBox' + index); } function onKeyUpEvent(index, event) { const eventCode = event.which || event.keyCode; if (getCodeBoxElement(index).value.length === 1) { if (index !== 4) { getCodeBoxElement(index+ 1).focus(); } else { getCodeBoxElement(index).blur(); // Submit code console.log('submit code '); } } if (eventCode === 8 && index !== 1) { getCodeBoxElement(index - 1).focus(); } } function onFocusEvent(index) { for (item = 1; item < index; item++) { const currentElement = getCodeBoxElement(item); if (!currentElement.value) { currentElement.focus(); break; } } } </script> </head> <body> <form> <input id="codeBox1" type="number" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)"/> <input id="codeBox2" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)"/> <input id="codeBox3" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)"/> <input id="codeBox4" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)"/> </form> </body> </body>

Answer 5

我會保留這 4 個單獨的字段方法，並向所有這些字段添加相同的事件處理程序，這將：

1. 檢查輸入是否有效（在字符類中，你願意接受）
2. 檢查您所在的字段，然后將焦點移到下一個字段，或單擊“確定”按鈕。

您甚至可以為此編寫一些單獨的 JS，然后重新使用它。

Answer 6

如果使用 AngularJS，您可以使用以下指令

在你的 HTML 添加

<div otp-input-directive options="otpInput"></div>

在您的控制器中添加

$scope.otpInput={
        size:6,
        type:"text",
        onDone: function(value){
            console.log(value);
        },
        onChange: function(value){
            console.log(value);
        }
    };

Plunker 鏈接

UI 組件的外觀和感覺

https://github.com/amstel91/otp-input-directive

Answer 7

我不知道如何在 html5 中拆分輸入，也許在 css 中您可以使用相同的類來控制您的輸入，並且您可以設置輸入樣式，例如：

 div{ text-align:center; background:#eee; } input{ border: 0; outline: 0; background: transparent; border-bottom: 2px solid black; width: 100px; text-align:center; padding : 5px; margin-left:10px; } button{ margin-top:20px !important; margin: 0 auto; color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }

 <div> <input class="form-control" placeholder="0" maxlength="1" /> <input class="form-control" placeholder="0" maxlength="1" /> <input class="form-control" placeholder="0" maxlength="1" /> <input class="form-control" placeholder="0" maxlength="1" /> <br><button type="button" onclick="myFunction()">Submit</button> <p id="optRes"></p> </div>

定義 myFunction() 並且您可以通過您的類獲取您的數組：表單控件，如果您必須檢查它，則轉換為字符串然后轉換為 int 。 有幫助嗎？