Enter 按钮在登录页面上不起作用
The Enter button not working on Login page
我刚刚做了一个登录系统,但我只能通过按屏幕上的按钮登录,不能使用键盘上的回车键。我怎样才能启用它?我阅读了有关 AcceptButton 的内容,但我该如何应用它?
我的代码:
login.php
<?php
require('inc/functions.php');
session_start();
if(checkLogedIn()){
header("location:index.php");
die();
}
include 'inc/header.php'
?>
<body>
<div id="wrap">
<div class="text-center">
<img src="img/logo.png" height="125" width="125">
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">Inloggen</div>
<div class="result"></div>
<div class="panel-body">
<form role="form" id="loginForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Gebruikersnaam" name="username" type="text" autofocus="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Wachtwoord" name="password" type="password">
</div>
<div class="row">
<div class="col-xs-7">
<a href="#" class="btn btn-success post">Inloggen</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div><!-- /.col-->
</div><!-- /.row -->
</div>
<footer class="footer">
<div class="text-center">
<p class="text-muted">© <?php echo date("Y"); ?> company name</p>
</div>
</footer>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.result').hide();
$(".post").on("click",function(){
// console.log('clicked!');
var formData = $('#loginForm').serialize();
$.ajax({
type: "POST",
url: "checkauth.php",
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data){
//window.location.href = "/welcome";
// console.log(data);
if(data.status2 == 'success'){
//
$('.panel-body').fadeOut(1400);
$('.result').html(data.message);
$('.result').fadeIn(1200);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 2000);
}else {
$('.result').html(data.message);
}
}
});
});
});
</script>
</body>
</html>
checkauth.php
<?php
session_start();
/* Check Login form submitted */
if($_SERVER['REQUEST_METHOD'] == 'POST'){
header('Content-Type: application/json');
/* Define username and associated password array */
$logins = array('admin' => 'admin2',
'username1' => 'password1',
'username2' => 'password2');
/* Check and assign submitted Username and Password to new variable */
$Username = isset($_POST['username']) ? $_POST['username'] : '';
$Password = isset($_POST['password']) ? $_POST['password'] : '';
// print_r($_POST);
/* Check Username and Password existence in defined array */
if (isset($logins[$Username]) && $logins[$Username] == $Password){
/* Success: Set session variables and redirect to Protected page */
$_SESSION['UserData']['Username']=$logins[$Username];
$_SESSION['UserData']['loggedin']=TRUE;
$return['message'] = '<br><div class="alert alert-success" role="alert">Login gegevens correct, welkom!</div><br>';
$return['status2'] = 'success';
} else {
/*Unsuccessful attempt: Set error message */
$return['message'] = '<div class="alert alert-danger" role="alert">Incorrecte login gegevens. Probeer het aub. opnieuw.</div>';
$return['status2'] = 'error';
}
echo json_encode($return);
}
else{
exit('No direct acces to this script!');
}
?>
有人能帮忙吗?
您可以将点击修改为:
$('#loginForm').keypress(function (e) {
if(e.keyCode=='13') //Keycode for "Return"
$('#login').click();
}});
您可以触发点击进入:
$(document).keydown(function(e){
var c = e.which;
e.stopPropagation();
if(c==13){
e.preventDefault();
$(".post").trigger("click");
}
});
要使输入按钮起作用,您可以使用
<input type="submit">
而不是
<a href="#" class="btn btn-success post">Inloggen</a>
我刚刚做了一个登录系统,但我只能通过按屏幕上的按钮登录,不能使用键盘上的回车键。我怎样才能启用它?我阅读了有关 AcceptButton 的内容,但我该如何应用它?
我的代码:
login.php
<?php
require('inc/functions.php');
session_start();
if(checkLogedIn()){
header("location:index.php");
die();
}
include 'inc/header.php'
?>
<body>
<div id="wrap">
<div class="text-center">
<img src="img/logo.png" height="125" width="125">
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">Inloggen</div>
<div class="result"></div>
<div class="panel-body">
<form role="form" id="loginForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Gebruikersnaam" name="username" type="text" autofocus="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Wachtwoord" name="password" type="password">
</div>
<div class="row">
<div class="col-xs-7">
<a href="#" class="btn btn-success post">Inloggen</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div><!-- /.col-->
</div><!-- /.row -->
</div>
<footer class="footer">
<div class="text-center">
<p class="text-muted">© <?php echo date("Y"); ?> company name</p>
</div>
</footer>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.result').hide();
$(".post").on("click",function(){
// console.log('clicked!');
var formData = $('#loginForm').serialize();
$.ajax({
type: "POST",
url: "checkauth.php",
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data){
//window.location.href = "/welcome";
// console.log(data);
if(data.status2 == 'success'){
//
$('.panel-body').fadeOut(1400);
$('.result').html(data.message);
$('.result').fadeIn(1200);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 2000);
}else {
$('.result').html(data.message);
}
}
});
});
});
</script>
</body>
</html>
checkauth.php
<?php
session_start();
/* Check Login form submitted */
if($_SERVER['REQUEST_METHOD'] == 'POST'){
header('Content-Type: application/json');
/* Define username and associated password array */
$logins = array('admin' => 'admin2',
'username1' => 'password1',
'username2' => 'password2');
/* Check and assign submitted Username and Password to new variable */
$Username = isset($_POST['username']) ? $_POST['username'] : '';
$Password = isset($_POST['password']) ? $_POST['password'] : '';
// print_r($_POST);
/* Check Username and Password existence in defined array */
if (isset($logins[$Username]) && $logins[$Username] == $Password){
/* Success: Set session variables and redirect to Protected page */
$_SESSION['UserData']['Username']=$logins[$Username];
$_SESSION['UserData']['loggedin']=TRUE;
$return['message'] = '<br><div class="alert alert-success" role="alert">Login gegevens correct, welkom!</div><br>';
$return['status2'] = 'success';
} else {
/*Unsuccessful attempt: Set error message */
$return['message'] = '<div class="alert alert-danger" role="alert">Incorrecte login gegevens. Probeer het aub. opnieuw.</div>';
$return['status2'] = 'error';
}
echo json_encode($return);
}
else{
exit('No direct acces to this script!');
}
?>
有人能帮忙吗?
您可以将点击修改为:
$('#loginForm').keypress(function (e) {
if(e.keyCode=='13') //Keycode for "Return"
$('#login').click();
}});
您可以触发点击进入:
$(document).keydown(function(e){
var c = e.which;
e.stopPropagation();
if(c==13){
e.preventDefault();
$(".post").trigger("click");
}
});
要使输入按钮起作用,您可以使用
<input type="submit">
而不是
<a href="#" class="btn btn-success post">Inloggen</a>