newz20
<<<
Назад
Ввод пин-кода или киношный экран разблокировки версия исправленная и доработанная
Другая реализация ввода пин-кода
Написал я значится статью прошлую, а она по-хорошему была раскритикованна. Но на то мы тут и собрались.
В комментариях был предложен пример правильного ввода кода, код отправляется целым, как ввел, а значит последованость можно будет проверить. Отправить код можно любой длины хоть вот так 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>Спасибо за внимание. Надеюсь исправился за прошлую статью, но она тоже имеет шанс на жизнь, как мне кажется.
Смотрите так же:
26.10.2020 Немного о безопасности.
03.10.2019 Получение адреса по координатам.
17.09.2018 Немного про правильную перезагрузку.
Краснодар, Россия
На форуме: newz20