<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
                <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
        <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

        </head>
  <body>
<div class="flex_code">
                          <input class="inputs code_1" value="" type="tel"  pattern="[0-9]*"   maxlength="1"  >
                          <input class="inputs code_2" value="" type="tel"  pattern="[0-9]*"   maxlength="1"  >
                          <input class="inputs code_3" value="" type="tel"  pattern="[0-9]*"  maxlength="1"  >
                          <input class="inputs code_4" value="" type="tel"  pattern="[0-9]*"   maxlength="1">
                      </div>
    </bp>
$(function() {
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength ) {
                if($(this).hasClass('code_4')){
                    $(this).blur();    
                     alert("Hello");                      //тут код функции
                }else{
                  $(this).next('.inputs').focus();
                }
        } 
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.