OTP UI with hide show button and use image as placeholder

Here is a demo with HTML, CSS, and jQuery script to create OTP input UI with toggle hide-show click eye. I also show a lock icon as a placeholder for an empty field.

DEMO

See the Pen OTP UI with hide show button by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<form action="" method="get" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
          <div class="mb-3 digit-group-inner">
            <input type="password" id="digit-1" name="digit-1" data-next="digit-2" data-filled="" />
            <input type="password" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" data-filled="" />
            <input type="password" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" data-filled="" />
            <input type="password" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" data-filled="" />
            <input type="password" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" data-filled="" />
            <input type="password" id="digit-6" name="digit-6" data-next="digit-7" data-previous="digit-5" data-filled="" />
            <i class="toggleOtp">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.3184 8.55515C13.3749 6.61861 10.7432 5.53125 7.99963 5.53125C5.25606 5.53125 2.62432 6.61861 0.680878 8.55515C0.563188 8.67284 0.49707 8.83246 0.49707 8.9989C0.49707 9.16533 0.563188 9.32496 0.680878 9.44265C0.798567 9.56034 0.958189 9.62645 1.12463 9.62645C1.29107 9.62645 1.45069 9.56034 1.56838 9.44265C3.27468 7.73816 5.58783 6.78074 7.99963 6.78074C10.4114 6.78074 12.7246 7.73816 14.4309 9.44265C14.489 9.50123 14.5581 9.54772 14.6343 9.57945C14.7104 9.61118 14.7921 9.62752 14.8746 9.62752C14.9571 9.62752 15.0388 9.61118 15.115 9.57945C15.1911 9.54772 15.2603 9.50123 15.3184 9.44265C15.377 9.38454 15.4235 9.31542 15.4552 9.23926C15.4869 9.16309 15.5033 9.0814 15.5033 8.9989C15.5033 8.91639 15.4869 8.8347 15.4552 8.75854C15.4235 8.68237 15.377 8.61325 15.3184 8.55515ZM12.9996 12.2301C10.9836 13.5486 8.52946 14.0201 6.16838 13.5426C6.00262 13.5095 5.83048 13.5435 5.68982 13.6373C5.54917 13.7311 5.45153 13.8769 5.41838 14.0426C5.38523 14.2084 5.41928 14.3805 5.51305 14.5212C5.60682 14.6619 5.75262 14.7595 5.91838 14.7926C8.60445 15.3357 11.3963 14.7967 13.6871 13.2926C13.828 13.2015 13.9269 13.0581 13.9621 12.894C13.9973 12.7299 13.9658 12.5585 13.8746 12.4176C13.7835 12.2767 13.6401 12.1778 13.476 12.1427C13.3119 12.1075 13.1405 12.139 12.9996 12.2301V12.2301ZM4.03713 12.8239C3.67995 12.6465 3.33352 12.4482 2.99963 12.2301C2.8624 12.1565 2.70263 12.1368 2.55162 12.1748C2.4006 12.2128 2.26922 12.3059 2.1832 12.4357C2.09718 12.5655 2.06272 12.7227 2.08656 12.8766C2.11041 13.0305 2.19085 13.17 2.31213 13.2676C2.6916 13.5221 3.0884 13.7498 3.49963 13.9489C3.58298 13.9908 3.6751 14.0122 3.76838 14.0114C3.90953 14.0106 4.04625 13.962 4.15627 13.8736C4.2663 13.7851 4.34314 13.662 4.3743 13.5244C4.40546 13.3867 4.3891 13.2425 4.32787 13.1153C4.26665 12.9881 4.16417 12.8854 4.03713 12.8239V12.8239Z" fill="#717171"/>
                <path d="M7.99979 12.75C8.49424 12.75 8.97759 12.6034 9.38871 12.3287C9.79984 12.054 10.1203 11.6635 10.3095 11.2067C10.4987 10.7499 10.5482 10.2472 10.4518 9.76227C10.3553 9.27732 10.1172 8.83186 9.76756 8.48223C9.41792 8.1326 8.97247 7.8945 8.48752 7.79804C8.00256 7.70157 7.4999 7.75108 7.04308 7.9403C6.58627 8.12952 6.19582 8.44995 5.92112 8.86107C5.64641 9.2722 5.49979 9.75555 5.49979 10.25C5.49979 10.913 5.76318 11.5489 6.23202 12.0178C6.70086 12.4866 7.33675 12.75 7.99979 12.75ZM7.99979 9C8.24702 9 8.48869 9.07331 8.69425 9.21066C8.89981 9.34801 9.06003 9.54324 9.15464 9.77165C9.24925 10.0001 9.274 10.2514 9.22577 10.4939C9.17754 10.7363 9.05849 10.9591 8.88367 11.1339C8.70886 11.3087 8.48613 11.4278 8.24365 11.476C8.00118 11.5242 7.74984 11.4995 7.52144 11.4048C7.29303 11.3102 7.0978 11.15 6.96045 10.9445C6.8231 10.7389 6.74979 10.4972 6.74979 10.25C6.74979 9.91848 6.88149 9.60054 7.11591 9.36612C7.35033 9.1317 7.66827 9 7.99979 9ZM7.99979 4C8.16555 4 8.32452 3.93415 8.44173 3.81694C8.55894 3.69973 8.62479 3.54076 8.62479 3.375V1.5C8.62479 1.33424 8.55894 1.17527 8.44173 1.05806C8.32452 0.940848 8.16555 0.875 7.99979 0.875C7.83403 0.875 7.67506 0.940848 7.55785 1.05806C7.44064 1.17527 7.37479 1.33424 7.37479 1.5V3.375C7.37479 3.54076 7.44064 3.69973 7.55785 3.81694C7.67506 3.93415 7.83403 4 7.99979 4ZM11.1248 4.625C11.2277 4.62447 11.3289 4.59852 11.4194 4.54945C11.5099 4.50039 11.5869 4.42973 11.6435 4.34375L12.8935 2.46875C12.9481 2.40103 12.9879 2.32266 13.0104 2.23867C13.033 2.15468 13.0378 2.06691 13.0244 1.98097C13.0111 1.89503 12.98 1.81282 12.9331 1.73959C12.8862 1.66636 12.8245 1.60373 12.752 1.55569C12.6796 1.50765 12.5978 1.47527 12.5121 1.46062C12.4264 1.44597 12.3386 1.44937 12.2542 1.47059C12.1699 1.49182 12.0909 1.53042 12.0224 1.58391C11.9538 1.6374 11.8971 1.70462 11.856 1.78125L10.606 3.65625C10.5156 3.79404 10.4832 3.96199 10.516 4.12352C10.5488 4.28506 10.644 4.42711 10.781 4.51875C10.8817 4.58924 11.0019 4.6264 11.1248 4.625V4.625ZM4.35604 4.34375C4.41266 4.42973 4.48963 4.50039 4.58013 4.54945C4.67063 4.59852 4.77185 4.62447 4.87479 4.625C4.99766 4.6264 5.11789 4.58924 5.21854 4.51875C5.35555 4.42711 5.45081 4.28506 5.48358 4.12352C5.51636 3.96199 5.484 3.79404 5.39354 3.65625L4.14354 1.78125C4.10243 1.70462 4.04579 1.6374 3.97722 1.58391C3.90866 1.53042 3.82968 1.49182 3.74535 1.47059C3.66102 1.44937 3.57318 1.44597 3.48747 1.46062C3.40175 1.47527 3.32003 1.50765 3.24754 1.55569C3.17504 1.60373 3.11337 1.66636 3.06647 1.73959C3.01957 1.81282 2.98846 1.89503 2.97515 1.98097C2.96183 2.06691 2.96659 2.15468 2.98913 2.23867C3.01167 2.32266 3.05149 2.40103 3.10604 2.46875L4.35604 4.34375Z" fill="#717171"/>
                <line x1="2.38169" y1="3.67703" x2="13.3817" y2="16.677" stroke="#717171"/>
              </svg>
            </i>
          </div>

          <div class="textInputWrapper mb-4 text-end">

        </form>

CSS

/* OTP UI */
.digit-group input {
  width: 30px;
  height: 40px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  margin: 0 7.5px;
  border-bottom: 2px solid #4F504E;
}
.digit-group input[data-filled=""] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REM0NDkwQzBCRkNDMTFFRDg5MEZCMkIxRDU1MDI3QTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REM0NDkwQzFCRkNDMTFFRDg5MEZCMkIxRDU1MDI3QTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQzQ0OTBCRUJGQ0MxMUVEODkwRkIyQjFENTUwMjdBMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQzQ0OTBCRkJGQ0MxMUVEODkwRkIyQjFENTUwMjdBMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psb2f9oAAAYuSURBVHja3Fd9TFNX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");
}
.digit-group input:focus {
  background-image: none;
}
.digit-group .splitter {
  padding: 0 5px;
  color: #717171;
  font-size: 24px;
}
.digit-group .toggleOtp {
  display: inline-block;
  cursor: pointer;
  margin-left: 7.5px;
}
.digit-group .toggleOtp svg {
  display: inline-block;
}
.digit-group .toggleOtp.active svg line {
  opacity: 0;
}

jQuery

$('.digit-group').find('input').each(function() {
	$(this).attr('maxlength', 1);
    $(this).attr('maxlength', 1);
	$(this).on('keyup', function(e) {
        $(this).attr("data-filled", $(this).val() ? '*' : '');
		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();
				}
			}
		}
	});
});

$('.toggleOtp').click(function(){
	$(this).toggleClass('active');
	
	if($('.toggleOtp').hasClass('active')) {
		$(this).closest('.digit-group-inner').find('input[type="password"]').each( function( index, value ) {
			value.setAttribute('type', 'text');
		});
	}else{
		$(this).closest('.digit-group-inner').find('input[type="text"]').each( function( index, value ) {
			value.setAttribute('type', 'password');
		});
	}
	

	
})