boa tarde, não estou a conseguir posicionar a imagem, pois ela faz com que a text field da password desça e não estou a conseguir colocar de forma a que nada mude de sitio nem dessa. apenas quero que a imagem apareça quando o caps lock é ligado e desapareça quando é desligado.
o codigo é o seguinte:
Código :
como sou novo aqui e nao sei como colocar imagens deixo 2 printscreens para download no link abaixo:
http://www60.zippyshare.com/v/oZUkFWkv/file.html
obrigado.
o codigo é o seguinte:
Código :
<html>
<head>
<title> Login </title>
</head>
<body background="fundo.jpg" bgproperties="fixed";>
<html>
<!--imagem do login-->
<img src="login.png" align="left">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form style="font-size:2em;" method="POST" action="login.php" id="formid">
<div> <img width="35px" height="35px" src="email.png"> <input type="email" name="email" size="30" style="font-size: 25px" placeholder="Email" required> </div>
<div> <img width="35px" height="35px" src="pass.png"> <input type="password" name="pass" minlength=6 size=30 style="font-size: 25px" placeholder="Password" required> <name id="capslockdiv" style="display: none; color: red;"> <img width="90px" height="50px" src="capslock_on.png"> </name> </div>
<br>
<div> <input type="image" width="115px" height="60px" src="entrar.png" > <a href="registar.php"> <img width="115px" height="60px" src="registar.png" hspace="150px" /> </a> </div>
</form>
<script>
$(document).ready(
function () {
check_capslock_form($('#formid')); //aplica a verificacao de capslock para todas tags introduzidas
}
);
document.onkeydown = function (e) { //verifica se a tecla capslock esta pressionada em toda a janela.
e = e || event;
if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
if (typeof (window.capsLockEnabled) !== 'undefined') {
if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
window.capsLockEnabled = !window.capsLockEnabled;
$('#capslockdiv').toggle();
}
window.lastpress = e.timeStamp;
//as vezes esta funcao ocorre duas vezes quando pressionado o capslock por isso utilizo o timeStamp para resolver o problema
}
};
function check_capslock(e) { //verifica se o caps lock esta pressionado ou nao
var s = String.fromCharCode(e.keyCode);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
window.capsLockEnabled = true;
$('#capslockdiv').show();
}
else {
window.capsLockEnabled = false;
$('#capslockdiv').hide();
}
}
function check_capslock_form(where) {
if (!where) { where = $(document); }
where.find('input,select').each(function () {
if (this.type != "hidden") {
$(this).keypress(check_capslock);
}
});
}
</script>
</body>
</html>
<head>
<title> Login </title>
</head>
<body background="fundo.jpg" bgproperties="fixed";>
<html>
<!--imagem do login-->
<img src="login.png" align="left">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form style="font-size:2em;" method="POST" action="login.php" id="formid">
<div> <img width="35px" height="35px" src="email.png"> <input type="email" name="email" size="30" style="font-size: 25px" placeholder="Email" required> </div>
<div> <img width="35px" height="35px" src="pass.png"> <input type="password" name="pass" minlength=6 size=30 style="font-size: 25px" placeholder="Password" required> <name id="capslockdiv" style="display: none; color: red;"> <img width="90px" height="50px" src="capslock_on.png"> </name> </div>
<br>
<div> <input type="image" width="115px" height="60px" src="entrar.png" > <a href="registar.php"> <img width="115px" height="60px" src="registar.png" hspace="150px" /> </a> </div>
</form>
<script>
$(document).ready(
function () {
check_capslock_form($('#formid')); //aplica a verificacao de capslock para todas tags introduzidas
}
);
document.onkeydown = function (e) { //verifica se a tecla capslock esta pressionada em toda a janela.
e = e || event;
if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
if (typeof (window.capsLockEnabled) !== 'undefined') {
if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
window.capsLockEnabled = !window.capsLockEnabled;
$('#capslockdiv').toggle();
}
window.lastpress = e.timeStamp;
//as vezes esta funcao ocorre duas vezes quando pressionado o capslock por isso utilizo o timeStamp para resolver o problema
}
};
function check_capslock(e) { //verifica se o caps lock esta pressionado ou nao
var s = String.fromCharCode(e.keyCode);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
window.capsLockEnabled = true;
$('#capslockdiv').show();
}
else {
window.capsLockEnabled = false;
$('#capslockdiv').hide();
}
}
function check_capslock_form(where) {
if (!where) { where = $(document); }
where.find('input,select').each(function () {
if (this.type != "hidden") {
$(this).keypress(check_capslock);
}
});
}
</script>
</body>
</html>
como sou novo aqui e nao sei como colocar imagens deixo 2 printscreens para download no link abaixo:
http://www60.zippyshare.com/v/oZUkFWkv/file.html
obrigado.