iOS style input field

Question

So I'd like to create an input field like the iOS one to input a numeric verification code with 6 characters. You can find an example right below (please have a look at the highlighted green one).

What is really important to me is that there is a bigger gap between the first 3 characters and the last 3 characters than between the other single letters.

What is also unumgebar is that I probably can not use multiple input fields, because I would like to execute the keyboard inputs like "delete" anyway. Auserdem I do not want to have to click each fled individually when you enter the code.

Note: What I'd like to achieve is an exact copy of the input field on the screenshot above.

What I've found so far is something like you can find in the snippet below. Two problems: 1. It looks like the input field is a bit buggy because it displays some pixels of another underlined field that shouldn't get displayed. 2. Theres no gap between the first three and the last three fields. (The one with the placeholder="3" should not be displayed.

input {
  border: none;
  width: 10.5ch;
  background: 
    repeating-linear-gradient(90deg, 
        black 0, 
        black 1ch, 
        transparent 0, 
        transparent 1.5ch) 
      0 100%/100% 2px no-repeat;
  font: 5ch consolas, monospace;
  letter-spacing: .5ch;
}

<input maxlength='7' value='' placeholder="01234567"/>

Any help would be really appreciated. Thanks a million in advance.

Edit 1: @Lorddirt - Inputting the last number of one block will made all absolutely jerky as you can hopefully see in this gif:

Edit 2: @Lorddirt - see this image:

I'm pretty sure you mixed some calculations but theres the overflow pixel occurrence. Furthermore you've fixed the "looking jerking bug" for the first input but not for the second one. Too bad. Thanks so much anyways :)

I know. This is because my idea was to just hide the 4. underlined field. @Lorddirt — , Jul 15 '18 at 11:18

Lorddirt · Accepted Answer · 2018-07-15T11:32:36.443

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.inputs');
      if ($next.length){
          $(this).next('.inputs').focus();
      }else{
          $(this).blur();
      }
    }else if (this.value.length == 0) {
      var $next = $(this).prev('.inputs');
      if ($next.length){
          $(this).prev('.inputs').focus();
      }else{
          $(this).blur();
      }
    }
});

input {
  caret-color: transparent !important;
  border: none;
  border-color: transparent;
  outline: none;
  width: 4.5ch;
  background: 
    repeating-linear-gradient(90deg, 
        black 0, 
        black 1ch, 
        transparent 0, 
        transparent 1.5ch) 
      0 100%/100% 2px no-repeat;
  font: 5ch consolas, monospace;
  letter-spacing: .5ch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='inputs' maxlength='3' value='' placeholder="123"/>
&nbsp;
<input class='inputs' maxlength='3' value='' placeholder="456"/>

Should fix your question, about not wanting to have to click on the inputs as well as the spacing

Sources:

http://jsfiddle.net/2VETF/3/ - JQuery to go to next input when input is filled in

Transparent, borderless text input - remove the input outline

Hide textfield blinking cursor - Hide cursor when selected

EDIT: Also made it go to the previous input IF it is empty (person deletes the input)

FIXED BUG: The input width was too big. Changed to 4.3

FIXED BUG: Fixed the shaking when typing

Thanks for you answer. But tbh it is kind of too buggy for me (using Safari). Also it looks like pressing delete is not working properly. Please see my edit. — , Jul 15 '18 at 11:23
You get the correct mark. Even if this is not really a working solution matching to my problem. Enjoy. — , Jul 22 '18 at 16:03

iOS style input field

1 Answers1