< >

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>