I know this question was already asked here:

But I'm not much of a frontend developer and I'm not familiar with using background-image: linear gradient.

CodePudding user response：

you need to do some styling and you done with what you want so here is HTML, CSS and jQuery code for user type with max number on one input field.

for input and automatic user move to next input field you need to use jQuery CDN i.e Content Delivery Network

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

$('.digit-group').find('input').each(function() {
  $(this).attr('maxlength', 1);
  $(this).on('keyup', function(e) {
    var parent = $($(this).parent());

    if (e.keyCode === 8 || e.keyCode === 37) {
      var prev = parent.find('input#'   $(this).data('previous'));

      if (prev.length) {
        $(prev).select();
      }
    } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
      var next = parent.find('input#'   $(this).data('next'));

      if (next.length) {
        $(next).select();
      } else {
        if (parent.data('autosubmit')) {
          parent.submit();
        }
      }
    }
  });
});

@import url('https://fonts.googleapis.com/css?family=Raleway:200');

$BaseBG: #ffffff;

body,
html {
  height: 100%;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
}

body {
  background-color: $BaseBG;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.digit-group input {
    width: 60px;
    height: 60px;
    background-color: lighten($BaseBG, 5%);
    border: none;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: black;
    margin: 0 2px;
    border-radius: 18px;
    border: 3px solid #293886;
  }

.prompt {
  margin-bottom: 20px;
  font-size: 20px;
  color: white;
}

::-webkit-input-placeholder {
  /* Edge */
  font-weight: 800;
  color: #9c9a9a;
}

:-ms-input-placeholder {
  /* Internet Explorer */
  font-weight: 800;
  color: #9c9a9a;
}

::placeholder {
  font-weight: 900;
  color: #9c9a9a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form method="get"  data-group-name="digits" data-autosubmit="false" autocomplete="off">
  <input type="text" id="digit-1" name="digit-1" data-next="digit-2" placeholder="-" />
  <input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" placeholder="-" />
  <input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" placeholder="-" />
  <input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" placeholder="-" />
  <input type="text" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" placeholder="-" />
  <input type="text" id="digit-6" name="digit-6" data-previous="digit-5" placeholder="-" />
</form>

Here you can play with My Fiddle Editor

CodePudding user response：

It this okay ?

document.addEventListener("DOMContentLoaded", function(event) {

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(); });

.height-100 {
    height: 100vh
}

.card {
    width: 400px;
    border: none;
    height: 300px;
    box-shadow: 0px 5px 20px 0px #d2dae3;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.card h6 {
    color: red;
    font-size: 20px
}

.inputs input {
    width: 40px;
    height: 40px
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.card-2 {
    background-color: #fff;
    padding: 10px;
    width: 350px;
    height: 100px;
    bottom: -50px;
    left: 20px;
    position: absolute;
    border-radius: 5px
}

.card-2 .content {
    margin-top: 50px
}

.card-2 .content a {
    color: red
}

.form-control:focus {
    box-shadow: none;
    border: 2px solid red
}

.validate {
    border-radius: 20px;
    height: 40px;
    background-color: red;
    border: 1px solid red;
    width: 140px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div >
    <div >
        <div >
         
           
            <div id="otp" > <input  type="text" id="first" maxlength="1" /> <input  type="text" id="second" maxlength="1" /> <input  type="text" id="third" maxlength="1" /> <input  type="text" id="fourth" maxlength="1" /> <input  type="text" id="fifth" maxlength="1" /> <input  type="text" id="sixth" maxlength="1" /> </div>
            <div > <button >Validate</button> </div>
        </div>
    </div>
</div>