Question

我正在努力实现以下功能：

enter image description here

这是一个输入框，有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

以下是我对这个问题的看法。

它使用适当的输入元素（请不要让用户的生活比现在更难）和透明背景在背景中渲染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="01234">
   <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/

Answer 3

也许您可以使用四个文本输入项并将它们放在一个小表中。使用JavaScript，使每个文本框占用一个字符，并将焦点状态提供给下一个文本框。可以使用表格边框和框来完成这些线条。使用CSS隐藏文本框框架。

如何实现以下使用css（数字输入）

3 个答案: