Doubt with the use of placeholder and onfocus in HTML

Navigation
3

Well, I'm creating a login screen where I want to use placeholder and onfocus for when the user clicks on the box disappear what is written (for example: "email") and, if he deletes everything from new, the word "e-mail" appears again.

I was able to do with the following code 

<div class="dados-div" id="dados-senha">
                <input type="password" placeholder="senha" onfocus="this.placeholder = ''" onblur="this.placeholder = 'senha'" />
            </div>

However, I need to leave the word without this blur and I can not.

EDIT

Placing the entire code 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <title>Login trevoso</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Open+Sans);

        body {
            background-color: #00aba9
        }
        #login-box{
            background-color: #ffffff;
            width: 800px;
            height: 325px;
            position:absolute; /* Aqui começa a rotina que vai até o final do estilo e centraliza a box no meio da tela, conforme Léo of the North pediu. Redimensiona se o user redimensionar o navegador */
            left:50%;
            top:50%;
            margin-left:-400px;
            margin-top:-162.5px;

        }

        #login-box-shadow{
            background-color: #ffffff;
            width: 800px;
            height: 326px;
            margin: auto auto 0px;
            box-shadow: 0px 0px 8px grey;
        }

        #login-trevoso {
            background-color: white;
            font: bold 33pt/33px sans-serif;
            color: #00aba9;
            padding: 32px 29px 15px;
            font-family: 'Open Sans', sans-serif;
        }

        .dados-div input{
            width: 750px;
            height: 60px;
            padding-left: 20px;
            font: italic 18pt/10px sans-serif;
            font-family: 'Open Sans', sans-serif;
            color: #2e2e2e;
            border-radius: 3px;
            border: 1px solid #b0b0b0;
            outline: none;
        }

        .dados-div {
            margin-left:15px;
            margin-top:15px;
        }

        .dados-div:hover input{
            border-color: #00aba9;
        }

        #botao {
            float:right;
            margin-right: 24px;
            color: white;
            background-color: #00aba9;
            padding: 15px 33px;
            border-radius:3px;
            border-bottom: 3px solid #007372;
            font: bold 12,41pt sans-serif;
            font-family: 'Open Sans', sans-serif;
            margin-top:19px;
            cursor:pointer;
            transition: background-color 1s;
        }

        #botao:hover {
            background-color: #007372;
        }

        #miss {
            margin-top:15px;
            margin-left: 30px;
            font: normal 13pt sans-serif;
            font-family: 'Open Sans', sans-serif;
            cursor:pointer;

        }

    </style>
</head>
<body>
<div id="login-box">
    <div id="login-box-shadow">
        <div id="login-trevoso"> Login  </div>
        <div class="dados-div" id="dados-usuario">
<div class="dados-div" id="dados-senha">
        <input type="text" placeholder="e-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'e-mail'" />
            </div>
        </div>

        <div class="dados-div" id="dados-senha">
            <div class="dados-div" id="dados-senha">
        <input type="password" placeholder="senha" onfocus="this.placeholder = ''" onblur="this.placeholder = 'senha'" />
            </div>
        </div>

        <div id="botoes">
            <div id="botao">ENVIAR</div>
            <!-- <div id="Lembrar-me"><input type="checkbox"/>Lembrar-me neste computador?</div>-->
        </div>
        <div id="miss"><a href="trouxao.html" style="text-decoration:none">Esqueceu a senha?</a></div>

    </div>

</div>

</div>
</body>
</html>
    
asked by anonymous 28.07.2015 / 01:53

2 answers

2

Each browser has its implementation (pseudo-element / class) of placeholder . 

::-webkit-input-placeholder {   /* WebKit browsers */
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  /* Internet Explorer 10+ */
   color: red;  
}
<div class="dados-div" id="dados-senha">
    <input type="password" placeholder="senha" onfocus="this.placeholder = ''" onkeyup="this.placeholder = 'senha'" />
</div>

Source: link

Regarding source not being centered on input : 

font: italic 18px/10px sans-serif;

You are setting the font size as well as the line-height property. The problem is not to define the two together, the problem is in the values.

    
28.07.2015 / 02:17
2

You can use the same placeholder to elaborate this, when you type it disappears, when you remove the writing, it returns the placeholder. Here's the example.

In my example, you can change the color of the writing as well, I think it should help you. 

::-webkit-input-placeholder {
   color: orange;
   font: 12px verdana, arial, sans-serif;
}

:-moz-placeholder {
   color: orange;
   font: 12px verdana, arial, sans-serif;
}

::-moz-placeholder {
   color: orange;  
   font: 12px verdana, arial, sans-serif;
}

:-ms-input-placeholder {  
   color: orange;  
   font: 12px verdana, arial, sans-serif;
}
<input type="password" placeholder="Digite sua senha"/>
    
28.07.2015 / 02:01
How to set up a query with optional conditions? Is it possible to assign the default value of a property with an attribute?