如何實現使用CSS（數字輸入）

Question

我想實現以下功能如下：

這是一個輸入框，有4位，一旦點擊，用戶可以輸入4個位數。 它是移動應用程序的一部分。

目前我所實現的是：example，請注意，由於某些原因， outline: none;工作在我的應用程序很好，但在這個例子的jsfiddle無法正常工作。

我的問題是如何繪製3分隔欄，並顯示這些數字 只是適合其位置？

使用css可以實現嗎？

下面

是代碼：

<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false"> 
    <div data-role="fieldcontain"> 
     <span> 
      <input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;"> 
     </span> 
    </div> 
    <input type="submit" class="submitHidden"> 
</form> 

CSS：

.ui-corner-all-input { 
    -webkit-background-clip: padding; 
    background-clip: padding-box; 
    -webkit-border-radius: .6em /*{global-radii-blocks}*/; 
    border-radius: .6em /*{global-radii-blocks}*/; 
    width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px; 
    margin-top: 24px; 
} 
.ui-shadow-around { 
    -moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/; 
    -webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/; 
    box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/; 
    border: 1px #b6b6b6 solid; 
} 
*:not(input):not(textarea) { 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
} 
FORM[data-enhance="false"] INPUT, textarea { 
    outline: none; 
} 
FORM[data-enhance="false"] SPAN { 
    overflow: hidden; 
    display: block; 
    padding: 0 10px 0 0px; 
    text-align: left; 
} 
.submitHidden { 
    visiblity: hidden; 
    position: absolute; 
    opacity: 0; 
} 

Answer 1

你可以做這樣的：

HTML：

<table> 
<tr> 
    <td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td> 
    <td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td> 
    <td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td> 
    <td><input id="4" class="clock" type="text" maxlength="1" size="1"></td> 
</tr> 

CSS：

.clock { 
    color:darkgray; 
    border-style:none; 
    width:40px; 
    height:60px; 
    font-size:60px; 
} 

td{ 
    border:2px solid darkgray 
} 
table { 
    border-collapse:collapse; 
} 

的JavaScript：

function next(next) { 
    document.getElementById(next).focus(); 
} 

鏈接：http://jsbin.com/uhaHunuq/1/edit?html,output

Answer 2

也許你可以使用四個文本輸入項目，並把它們放在一張小桌子。使用JavaScript，使每個文本框佔用一個字符並將焦點狀態賦予下一個文本框。這些線條可以用表格邊框和框來完成。使用CSS隱藏文本框。

Answer 3

這是我對這個問題的看法。

它使用一個合適的輸入元素（請不要讓用戶的生活比以前更難）以及透明的背景渲染背景中的4個塊。

.input-widget { 
 
    vertical-align: top; 
 
    margin-left: 1rem; 
 
    font-size: 2rem; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.input-widget .input { 
 
    width: 8rem; 
 
    font-size: inherit; 
 
    font-family: inherit; 
 
    letter-spacing: 5px; 
 
    background-color: transparent; 
 
    border: none; 
 
    -moz-appearance: textfield; 
 
} 
 

 
.input-widget .input::-webkit-inner-spin-button, 
 
.input-widget .input::-webkit-outer-spin-button { 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
} 
 

 
.input-widget .digit-background { 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.input-widget .digit-background .digit { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.input-widget .digit-background .digit::before { 
 
    content: '0'; 
 
    color: lightgray; 
 
    background-color: currentColor; 
 
    display: inline-block; 
 
    padding: 1px; 
 
    margin: -1px 4px 0 -1px; 
 
}

<div class="input-widget"> 
 
    <input type="number" max="9999" class="input" value=""> 
 
    <div class="digit-background"> 
 
    <div class="digit"></div> 
 
    <div class="digit"></div> 
 
    <div class="digit"></div> 
 
    <div class="digit"></div> 
 
    </div> 
 
</div>

而一個SCSS版本是在這裏：https://jsfiddle.net/cburgmer/0xgtdyLj/1/