textfeld_gestalten-mit-blink-cursor.php
Quell Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="viewport" content="user-scalable=yes, width=736" />
<style>
body{
background: black;
margin: 0px;
}
.container{
width: 100%;
height: 200px;
overflow: hidden;
}
.invisible{
position: absolute;
z-index: 2;
background: transparent;
width: 550px;
margin-left: -50px;
margin-top: 50px;
border: none;
cursor: default;
}
.fake{
position: absolute;
margin: 50px auto;
z-index: 1;
width:500px;
}
.star{
display: inline-block;
width: 10px;
height: 40px;
margin-right: 3px;
background: green;
animation: blink 0.4s linear forwards infinite;
}
#container1{
position:absolute;
top:120px;
left:200px;
height:50px;
width:500px;
}
#container2{
position:absolute;
left:600px;
top:47px;
height:500px;
width:200px;
color:white;
font-size:80px;
font-weight:600;
}
input{
margin-top:120px;
height:80px;
}
@keyframes blink{
0%,49%{
background:red;
}
50%,100%{
background:black;
}
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="all">
<div id="container1">
<img src="http://www.entername.de/images/en.png" alt="ENTER NAME">
</div>
<div id="container2">
<div class="container">
<div id="fake" class="fake">
<span id="star" class='star'></span>
</div>
<input type="text" id="password" class="invisible" maxlength="40">
</div>
</div>
</div>
<script>
$(function() {
// $('#password').focus();
$('#password').keyup(function() {
var fakeHtml = '';
for (i = 0; i < 40; i++) {
if( i < $(this).val().length ){
p=$(this).val()
$('span').remove();
fakeHtml = p+"<span id='star' class='star full'> </span>\n";
}
}
$("#fake").html(fakeHtml);
})
});
</script>
</body>
</html>