Ao usar o HTML+CSS+JavaScript para produção de páginas, geralmente encontramos pequenos detalhes que afetam a experiência do usuário e são facilmente ignorados por nós. Por exemplo, as informações rápidas na caixa de entrada de entrada podem ser exibidas e ocultas com base na obtenção e perda de foco do objeto. Hoje, quero compartilhar com você essas dicas, espero que você não atire em tijolos ~~~
1. Requisito
Caixa de entrada de entrada, quando o cursor é exibido, oculta as informações de prompt;
2. Método
1. Dê o nome do ID à entrada, Onfocus = "Nome do método 1 (this)", onblur = "Nome do método 2 (this)"
2. Declare o valor variável, obtenha a entrada através do nome do ID
3. Nome do método da função 1 (InputObj) {
Copie o código do código da seguinte forma:
if (inputObj.value == "...") {) {
inputObj.value = "";
}
}
4. Nome do método da função 2 (inputObj) {
Copie o código do código da seguinte forma:
if (inputObj.value == "" ") {{
inputobj.value = "..." ;;;
}
}
5. Nota: Se houver várias tags de entrada na mesma página que requer a mesma configuração, o nome do método não poderá ser consistente.
Terceiro, instância
Copie o código do código da seguinte forma:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> Documento não -título </ititle>
<link href = "arquivo: /// e | /midi/css/index.css" type = "text/css" rel = "stylesheet"/>/>
<script type = "text/javascript">
var value = document.getElementById ('shuru');
Função qingkong (inputObj) {{
if (inputObj.value == "por favor digite seu nome") {{
inputObj.value = "";
}
}
Função likai (inputObj) {
if (inputObj.value == '') {
inputObj.value = "Por favor, digite seu nome";
}
}
</script>
<Style type = "text/css">
/*O texto abaixo pode alterar a cor de fundo da caixa de entrada no navegador do IE*/
.Search Input {Star: Expression
this.style.backgroundColor = "#FF0000"
},
onMouseOut = function () {
This.style.backgroundcolor = "#ffffff"
})
}
</style>
</head>
<Body>
<input type = "text" id = "shuru" value = "Por favor, digite o nome da música ou o nome do cantor" onfocus = "qingkong (this)" onblur = "likai (this)"/>
</body>
</html>