Ввод пин-кода или киношный экран разблокировки версия исправленная и доработанная

<<< Back

Ввод пин-кода или киношный экран разблокировки версия исправленная и доработанная

Другая реализация ввода пин-кода

Написал я значится статью прошлую, а она по-хорошему была раскритикованна. Но на то мы тут и собрались.

В комментариях был предложен пример правильного ввода кода, код отправляется целым, как ввел, а значит последованость можно будет проверить. Отправить код можно любой длины хоть вот так 157569852369852147, именно так он и запишется в свойство которое вы укажете, далее метод привязанный к свойству должен отрабатывать вашу логику.
Перенес я код на сцену тестовую, а он расползся. Поправил css и все гуд стало. Где поправил укажу в коде

Теперь как на сцене реализовать
В дополнительный css вставляем

#PINform input:focus,
#PINform select:focus,
#PINform textarea:focus,
#PINform button:focus {
    outline: none;
}
#PINform {
    background: #ededed;
    position: absolute;
    width: 300px; height: 400px;

    padding: 30px;
      -webkit-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
              box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
}
#PINbox {
    background: #ededed;
    margin: 3.5%;
    width: 92%;
    font-size: 4em;
    text-align: center;
    border: 1px solid #d5d5d5;
}
.PINbutton {
    background: #ededed;
    color: #7e7e7e;
    border: none;
    /*background: linear-gradient(to bottom, #fafafa, #eaeaea);
      -webkit-box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);
              box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);*/
    border-radius: 50%;
    font-size: 1.5em;
    text-align: center;
    width: 60px;
    height: 60px;
    margin: 7px 10px; /*в этой строке пришлось 10 пикселей написать, было 20, но все плыло и расползалось*/
    padding: 0;
}
.clear, .enter {
    font-size: 1em;
}
.PINbutton:hover {
    box-shadow: #506CE8 0 0 1px 1px;
}
.PINbutton:active {
    background: #506CE8;
    color: #fff;
}
.clear:hover {
    box-shadow: #ff3c41 0 0 1px 1px;
}
.clear:active {
    background: #ff3c41;
    color: #fff;
}
.enter:hover {
    box-shadow: #47cf73 0 0 1px 1px;
}
.enter:active {
    background: #47cf73;
    color: #fff;
}
.shadow{
      -webkit-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
              box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
                            }

В элемент html

<head>
  <meta charset="UTF-8">
    <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/183786/waves.css'>  /*тут вызывается еще один css, но и без него работает, и вообще он не доступен, только ошибки вызывает*/
</head>
<body>

<div id="PINcode"></div>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  /*тут вызывается еще один js, но и без него работает, если захотите можно скачать и закинуть на сервер*/
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> /*тут вызывается еще один js, но и без него работает, если захотите можно скачать и закинуть на сервер */
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/183786/waves.js'></script> /*тут вызывается еще один js, но и без него работает и вообще он не доступен, только ошибки вызывает*/
<script>
 $(function() {
    $( "#PINform" ).draggable();
});

$( "#PINcode" ).html(
    "<form action='' method='' name='PINform' id='PINform' autocomplete='off' draggable='true'>" +
        "<input id='PINbox' type='password' value='' name='PINbox' disabled />" +
        "<br/>" +
        "<input type='button' class='PINbutton' name='1' value='1' id='1' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton' name='2' value='2' id='2' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton' name='3' value='3' id='3' onClick=addNumber(this); />" +
        "<br>" +
        "<input type='button' class='PINbutton' name='4' value='4' id='4' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton' name='5' value='5' id='5' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton' name='6' value='6' id='6' onClick=addNumber(this); />" +
        "<br>" +
        "<input type='button' class='PINbutton' name='7' value='7' id='7' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton' name='8' value='8' id='8' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton' name='9' value='9' id='9' onClick=addNumber(this); />" +
        "<br>" +
        "<input type='button' class='PINbutton clear' name='-' value='clear' id='-' onClick=clearForm(this); />" +
        "<input type='button' class='PINbutton' name='0' value='0' id='0' onClick=addNumber(this); />" +
        "<input type='button' class='PINbutton enter' name='+' value='enter' id='+' onClick=submitForm(PINbox); />" +
    "</form>"
);

function addNumber(e){
    //document.getElementById('PINbox').value = document.getElementById('PINbox').value+element.value;
    var v = $( "#PINbox" ).val();
    $( "#PINbox" ).val( v + e.value );
}
function clearForm(e){
    //document.getElementById('PINbox').value = "";
    $( "#PINbox" ).val( "" );
}
function submitForm(e) {
    if (e.value == "") {
        alert("Enter a PIN");
    } else {
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=resh&v="+ e.value, true); /*Вот в этой строке прописываем свойство и объект, как в прошлой статье через http будем работать*/
  xhttp.send();
 /*
        alert( "Your PIN has been sent! - " + e.value );*/
        data = {
            pin: e.value
        }
        /*      
        apiCall( data, function( r ) {
            $( "#logo" ).attr( "src", r.site_logo );
            $( ".title-msg" ).text( r.site_msg );
            accent = r.accent;
            $( ".accent-bg" ).css( "background-color", accent );
        });
        */

        //document.getElementById('PINbox').value = "";
        $( "#PINbox" ).val( "" );
    };
};

/*
function apiCall( post, callback ) {    
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "admin/api.php",
        data: JSON.stringify( post ),
        dataType: "json",
        success: function ( r ) {
            callback( r );
        },
        error: function ( response ) {
            console.log( response )
        },
    });
}
*/
 </script>

</body>

Спасибо за внимание. Надеюсь исправился за прошлую статью, но она тоже имеет шанс на жизнь, как мне кажется.

Discuss (0) (9)

newz20

Ввод пин-кода или киношный экран разблокировки версия исправленная и доработанная