css 如何将输入字段分区以在屏幕上显示为单独的输入字段？

vfhzx4xs  于 2023-03-25  发布在  其他
关注(0)|答案(8)|浏览(176)

看看这张图片：

我想设计像在图像中的东西，其中一个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" />

我不确定这是否是正确的方法。我认为必须有一些样式选项，其中一个输入文本框将显示为分区的一个像在图像中。是否可以使用引导？如何样式一个输入控件显示为分区的输入字段？

css

8条答案

按热度按时间
6kkfgxo0

6kkfgxo01#

您不必保留四个单独的字段。
首先，你应该调整字符间距，然后调整底部的边框样式.

#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;
  outline : none;
}
<input id="partitioned" type="text" maxlength="4" />

--编辑以修复4个字符丑陋的5个下划线--
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
我认为这可以作为一个起点。
希望这能帮上忙...

赞(0）分享  回复(0）举报  2023-03-25
nwlqm0z1

nwlqm0z12#

我知道这个问题已经很老了。我是在试图为我的项目实现同样的目标时偶然发现的。
我找不到我需要的东西。所以我用这里的想法自己做了一个
你可以使用任意数量的字符，只要所有的输入字段都在一个div和id="otp"中，就不需要在javascript中做任何改变。

  • 这里是预览：*

看一下代码here

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>
赞(0）分享  回复(0）举报  2023-03-25
6rvt4ljy

6rvt4ljy3#

这对我来说没有任何额外的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>
赞(0）分享  回复(0）举报  2023-03-25
yhuiod9q

yhuiod9q4#

希望这个解决方案对您有所帮助，如果您愿意，可以从input元素中删除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>
赞(0）分享  回复(0）举报  2023-03-25
mwngjboj

mwngjboj5#

我只想保留这4个单独字段的方法，并向所有字段添加相同的事件处理程序，这将：
1.检查输入是否有效（在character类中，你愿意接受）
1.检查您所在的字段，然后将焦点移到下一个字段或“确定”按钮。
你甚至可以为此编写一个单独的JS，并重用它。

赞(0）分享  回复(0）举报  2023-03-25
scyqe7ek

scyqe7ek6#

只是改变了Midhun Monachan的片段添加复制粘贴功能。

document.addEventListener("DOMContentLoaded", function(event) {
   
    function OTPInput() {
        const editor = document.getElementById('first');
        editor.onpaste = pasteOTP;

        const inputs = document.querySelectorAll('#otp > *[id]');
        for (let i = 0; i < inputs.length; i++) { 
            inputs[i].addEventListener('input', function(event) { 
                if(!event.target.value || event.target.value == '' ){
                    if(event.target.previousSibling.previousSibling){
                        event.target.previousSibling.previousSibling.focus();    
                    }
                
                }else{ 
                    if(event.target.nextSibling.nextSibling){
                        event.target.nextSibling.nextSibling.focus();
                    }
                }               
            });             
        } 
    } 
    OTPInput(); 
});

function pasteOTP(event){
    event.preventDefault();
    let elm = event.target;
    let pasteVal = event.clipboardData.getData('text').split("");
    if(pasteVal.length > 0){
        while(elm){
            elm.value = pasteVal.shift();
            elm = elm.nextSibling.nextSibling;
        }
    }
}
input {
text-align: center!important;
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        border-radius: 0.25rem !important;
            margin: 0.5rem !important;
                overflow: visible;
                word-wrap: break-word;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form id="otpForm" >
              <div class="container height-100 d-flex justify-content-center align-items-center">
                  <div class="position-relative">
                      <div class="card p-2 text-center">
                          
                          <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2"> 
                            <input class="m-2 text-center form-control rounded" type="text" id="first" maxlength="1" /> 
                            <input class="m-2 text-center form-control rounded" type="text" id="second" maxlength="1" /> 
                            <input class="m-2 text-center form-control rounded" type="text" id="third" maxlength="1" /> 
                            <input class="m-2 text-center form-control rounded" type="text" id="fourth" maxlength="1" /> 
                            <input class="m-2 text-center form-control rounded" type="text" id="fifth" maxlength="1" /> 
                            <input class="m-2 text-center form-control rounded" type="text" id="sixth" maxlength="1" /> 
                          </div>
                         
                      </div>                    
                  </div>
              </div>
            </form>
赞(0）分享  回复(0）举报  2023-03-25
zf9nrax1

zf9nrax17#

如果使用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 link
UI component look and feel
https://github.com/amstel91/otp-input-directive

赞(0）分享  回复(0）举报  2023-03-25
rfbsl7qr

rfbsl7qr8#

If your using input type number, then use below code, It's Working

#otpOuterBlock{
  width: 190px; 
  overflow: hidden;
}
#otpInnerBlock{
  left: 0;
  position: sticky;
}

#otpVerifyText{
  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;
}

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

input[type=number] {
    -moz-appearance: textfield;
}


<div id="otpOuterBlock">
    <div id="otpInnerBlock">
        <input id="otpVerifyText" type="number" maxlength="4" />
    </div>
</div>
赞(0）分享  回复(0）举报  2023-03-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com