Como criar uma etiqueta dentro de um elemento ?

StackOverflow https://stackoverflow.com/questions/781473

  •  13-09-2019
  •  | 
  •  

Pergunta

Gostaria de inserir um texto descritivo dentro de um elemento de entrada que disappers quando o usuário clique sobre ele.

Eu sei que é um truque muito comum, mas eu não sei como fazer isso ..

O que é o mais simples melhor solução /?

Foi útil?

Solução 

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

Um exemplo melhor seria o botão de pesquisa SO! Isso é onde eu tenho este código a partir. Visualizando fonte da página é uma ferramenta valiosa.

Outras dicas

Se você estiver usando HTML5, você pode usar o atributo placeholder. 

<input type="text" name="user" placeholder="Username">

Na minha opinião, a melhor solução envolve nem imagens nem usando o valor padrão da entrada. Pelo contrário, é algo como solução de David Dorward.

É fácil de implementar e degrada muito bem para leitores de tela e os usuários sem javascript.

Dê uma olhada em dois exemplos aqui: http://attardi.org/labels/

Eu costumo usar o segundo método (Etiquetas2) em minhas formas.

A abordagem comum é usar o valor padrão como um rótulo, e, em seguida, removê-lo quando o campo ganha o foco.

Eu realmente não gosto dessa abordagem, pois tem implicações de acessibilidade e usabilidade.

Em vez disso, gostaria de começar por usar um elemento padrão ao lado do campo.

Então, se JavaScript está ativo, definir uma classe em um elemento ancestral que faz com que alguns novos estilos para aplicar esse:

  • Relativamente posicionar uma div que contém a entrada e etiqueta
  • Absolutamente posicionar o rótulo
  • Absolutamente posicionar a entrada na parte superior da etiqueta
  • Remover as fronteiras de entrada e defina sua cor de fundo para transparente

Então, e também sempre que a entrada perde o foco, eu teste para ver se a entrada tem um valor. Se isso acontecer, verifique se um elemento ancestral tem uma classe (por exemplo, "esconder-label"), caso contrário, garantir que ele não tem essa classe.

Sempre que a entrada ganha o foco, conjunto que classe.

A folha de estilo usaria essa classname em um seletor para esconder o rótulo (usando text-indent: -9999px, geralmente).

Esta abordagem fornece uma experiência decente para todos os usuários, incluindo aqueles com JS deficientes e aqueles que utilizam leitores de tela.

Eu coloquei soluções propostas pela @Cory Walker com as extensões de @Rafael ea bruxa @Tex uma forma foi um pouco complicado para mim e veio com uma solução que é esperançosamente

à prova de erros com javascript e CSS desativado.

Ele manipula com o background-color do campo de formulário para exibir / ocultar o rótulo. 

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

Ver o script em ação: http://mattr.co.uk/work/form_label. html 

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

Adicionar um evento onblur também.

Quando você começa a digitar vai disappear.If esvaziar ele aparecerá novamente. 

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

Maneira mais simples ...

Utilize PlaceHolder.JS suas obras em todos os navegadores e muito fácil para os navegadores não compatíveis html5 http://jamesallardice.github.io/Placeholders.js/

Uma dica sobre propriedade HTML espaço reservado e a tag textarea , certifique-se não há qualquer espaço entre <textarea> e </textarea>, caso contrário, o espaço reservado não funcionar, por exemplo: 

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

Isso não vai funcionar, porque não há um espaço entre ...

Use esta

estilo: 

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

html:

javascript: 

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

Apenas lembre-se de chamar defaultLabelClean () função antes de enviar o formulário.

bom trabalho

Você não precisa de um código Javascript para isso ...
Eu acho que você quer dizer o atributo de espaço reservado. Aqui está o código: 

<input type="text" placeholder="Your descriptive text goes here...">



O texto padrão será cinza-ish e quando clicado, ele irá desaparecer!

Eu acho que é bom para manter a etiqueta e não ao uso do espaço reservado como mencionado acima. É bom para UX como explicar aqui: https://www.smashingmagazine.com/2018/03 / UX-contato-forms-essenciais-conversões /

Aqui exemplo com campos de entrada etiqueta dentro: codepen.io/jdax/pen/mEBJNa

Aqui está um exemplo simples, tudo que faz é sobreposição de uma imagem (com o que fraseio você quiser). Eu vi essa técnica em algum lugar. Eu estou usando a biblioteca de protótipo assim que você precisa para modificar se estiver usando alguma outra coisa. Com o carregamento da imagem após window.load ele falhar graciosamente se o javascript está desativado. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top