Doubt with the use of placeholder and onfocus in HTML

Asked

Viewed 649 times

3

Guys, 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: "e-mail") and, if it erases everything again, the word "e-mail" appears again.

I managed to do it 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’t.

EDIT

Putting the whole 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>
html html5

  • You are already using the placeholder="Text in the field"

  • @maxixilianoMeyer try to be clearer

  • From what I understand, he wants that when the user deletes the password, that reappears the placeholder... includes the snippet to facilitate understanding, but have not yet approved the edition... I do not know if you can do only with HTML... @Andrébaill

  • But @gustavox the placeholder itself does this

  • That’s it, @Gustavox. That reappears the placeholder, but without the Blur

  • @Andrébaill looks at the snippet (Execute code snippet)... When you delete the password it does not return the placeholder text...

  • I posted an answer with the simulation, in my view, that would be

  • @Maximilianomeyer when you say, "without that blur" do you mean the color of the font? Take off the gray color and put black in the placeholder?

  • Isso@gerep In addition Blur is changing the formatting I did, leaving the larger font, for example, cutting the top part of the word that is too big for the box

  • @Maximilianomeyer, you can update the example showing this problem with the font?

  • I set you an example, maybe that’s your idea?

  • @Gerep I put the whole code

  • @Andrébaill I will test

  • @Maximilianomeyer your problem with the source is on this line font: italic 18px/10px sans-serif; 'cause you’re doing it that way?

  • @Gerep is part of the "instructions" of the task. The font must be italicized and have this size. Thanks for the touch, I noticed that there was something extra right there, I took the 10px and was cool, no more cuts the text

  • @Maximilianomeyer, in my reply I explained a little better what happens in this line.

  • @Maximilianomeyer, to help the community, choose the answer that helped you.

  • @Gerep had not scheduled any, because for me they did not work well. Well, I’ll mark the best answer, because you can still help others.

Show 13 more comments

2 answers

2

You can use the same placeholder to elaborate this, when you type it some, when you remove the writing, returns the placeholder. Follow the example.

In this example of mine, you can change the color also of the writing, I think I 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"/>

  • Thanks André, but in this case he didn’t delete the placeholder when I click on the insertion field.

  • Solved the placeholder problem, but it still didn’t work on onfocus (didn’t delete what was on the screen for the user clicked on the box)

  • @Maximilianomeyer I made a test here with this code including onfocus="this.placeholder = ''" and it disappears when you click on it, but it doesn’t reappear when it erases everything...

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: https://css-tricks.com/snippets/css/style-placeholder-text/

In relation to the source not being centralized in the input:

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

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

  • Solved the placeholder problem, but it still didn’t work on onfocus (didn’t delete what was on the screen for the user clicked on the box)

  • @Maximilianomeyer, I don’t understand the problem with onfocus(), when you click the field again it should delete what the user typed?!

  • No. It works like this. It says "e-mail" on the box. With onfocus when the user clicks on the box the word "e-mail" disappears, in fact it is replaced by nothing, more exactly by " " which is set in onfocus="this.placeholder = ''"

  • @Maximilianomeyer, when I click on the field, it removes what is in the value and put your "", what else do you need me to do? That’s what I don’t understand. For you the "email" or "password" is not being removed when you click on the field?

  • @Gerep, you need when you delete what was typed, to reappear the placeholder.

  • @Gerep exactly. But in the example you gave me this is not happening. It’s working right there for you?

  • @Maximilianomeyer, the placeholder comes back when you take focus from the field. I typed an email, deleted the value, took focus from the field and the placeholder reappeared

  • @Maximilianomeyer, yes, here it is working perfectly

  • @Maximilianomeyer https://jsfiddle.net/ug5L491t/, please have a look and see if it’s working.

  • @Maximilianomeyer here is also working, but only back the placeholder when it loses focus, and I think you need as with onkeyup right...

  • @Gerep I did a test here, I think if you move your fiddle to onkeyup="this.placeholder = 'e-mail'" is 100% what AP needs (btw, which browser you are using AP?)...

  • 2

    @gustavox, thank you very much for the tip, already updated: https://jsfiddle.net/ug5L491t/1/

  • Remember also tidying up in the answer (in the snippet). I gave +1 in your answer, and I think you solved it right @Maximilianomeyer? If solved, do not forget to give a positive vote and mark the answer as accepted.

  • 2

    @gustavox, updated as well =)

  • Thanks for the help guys. Hugging. I’ll give the +1 yes

  • I’ll accept yes, it’s just that I’m still testing here uheuheh.

  • 1

    Hug @gustavox and thank you so much for your help. Who knows one day I can repay you

Show 12 more comments

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.