How to Partition Input Field to Appear as Separate Input Fields on Screen

#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" />

How to remove letter-spacing for the last letter of an input field with CSS?

The width of #partitioned is too small, and is causing the input field to scroll horizontally to accommodate the last digit. Change the width to width: 220px; and this will fix it:

https://jsfiddle.net/yx1guj3s/

Seperate boxes for each letter in an Input field

I dont think you need any js for this. You only need:

• An image of a box
• A monospaced font
• Some playing around with css values
• Some Phantasy

See this CSS applied to an input field:

#text{
    background-image: url("square.gif");    
    width: 195px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
}

an example here:

http://jsfiddle.net/w564j/

Split input into separate boxes

Here's one way to implement this pattern:

HTML:

<div class="digits">
  <input type="text" maxlength="1" name="digit1" />
  <input type="text" maxlength="1" name="digit2" />
  <input type="text" maxlength="1" name="digit3" />
  <input type="text" maxlength="1" name="digit4" />  
</div>

CSS:

input {
  font-size: 2rem;
  width: 1.5rem;
  text-align: center;
}
input:focus {
  border: 2px solid yellowgreen;
  outline: none;
}

JAVASCRIPT:

// Listen on the 'input' event inside the .digits area:
document.querySelector(".digits").addEventListener("input", function(e){

  // Exclude non-numeric characters from input:
  e.target.value = e.target.value.replace(/[^0-9]/g,'');

  // If the input value is filled and there is a neighbouring element that is input, then focus on that element:
  if ( e.target.value !== "" && e.target.nextElementSibling && e.target.nextElementSibling.nodeName === "INPUT" ){

    e.target.nextElementSibling.focus();

  }

});

2) In case you want the input values to be updated when already filled:

<div class="digits">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
</div>

document.querySelector(".digits").addEventListener("input", function(e){
  e.target.value = e.data.replace(/[^0-9]/g,'');
  if ( e.target.value !== "" && e.target.nextElementSibling && e.target.nextElementSibling.nodeName === "INPUT" ){
    e.target.nextElementSibling.focus();
  } 
});

document.querySelector("input").focus();
document.querySelector(".digits").addEventListener("input", function({ target, data }){

  // Exclude non-numeric characters (if a value has been entered)
  data && ( target.value = data.replace(/[^0-9]/g,'') );
  
  const hasValue = target.value !== "";
  const hasSibling = target.nextElementSibling;
  const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";

  if ( hasValue && hasSiblingInput ){

    target.nextElementSibling.focus();
  
  } 

});

input {
  font-size: 3rem;
  width: 2.6rem;
  border: 2px solid #aaa;
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
input:focus {
  border: 2px solid yellowgreen;
  outline: none;
}

/* DECORATION */

input:focus {
  animation-name: zoom;
  animation-duration: 200ms;
}

@keyframes zoom {
  from {
    
  }
  to {
    transform: scale(2);
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: lightgray;
}

.digits {
  padding: 20px;
  display: inline-block;
}

<div class="digits">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
  <input type="text" name="digit5" />  
</div>

$("input").keyup(function () {    if (this.value.length == this.maxLength) {      $(this).next("input").focus();    }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><fieldset class="container"> <legend>Name : </legend>   <input type="text" name="name[]" maxlength="1" size="1">    <input type="text" name="name[]" maxlength="1" size="1">  <input type="text" name="name[]" maxlength="1" size="1">  <input type="text" name="name[]" maxlength="1" size="1">  <input type="text" name="name[]" maxlength="1" size="1">  <input type="text" name="name[]" maxlength="1" size="1"></fieldset><fieldset>  <legend>Father name : </legend>  <input type="text" name="father_name[]" maxlength="1" size="1">    <input type="text" name="father_name[]" maxlength="1" size="1">  <input type="text" name="father_name[]" maxlength="1" size="1">  <input type="text" name="father_name[]" maxlength="1" size="1">  <input type="text" name="father_name[]" maxlength="1" size="1">  <input type="text" name="father_name[]" maxlength="1" size="1"></fieldset></form>