Wie ein Etikett innerhalb eines Element zu schaffen?

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

  •  13-09-2019
  •  | 
  •  

Frage

Ich mag einen beschreibenden Text in einem Eingabeelement einzufügen, dass disappers, wenn der Benutzer darauf klicken.

Ich weiß, es ist ein sehr verbreiteter Trick, aber ich weiß nicht, wie das zu tun ..

Was ist die einfachste / bessere Lösung?

War es hilfreich?

Lösung 

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

Ein besseres Beispiel wäre die SO Suchtaste! Das ist, wo ich diesen Code bekam aus. Sie sehen Seite Quelle ist ein wertvolles Werkzeug.

Andere Tipps

Wenn Sie HTML5 verwenden, können Sie das placeholder Attribut verwenden. 

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

Meiner Meinung nach beinhaltet die beste Lösung weder Bilder noch mit dem Standardwert des Eingangs. Vielmehr sieht es so etwas wie David Dorward Lösung.

Es ist einfach zu implementieren und degradiert schön für Screenreader und Benutzer ohne Javascript.

Werfen Sie einen Blick auf die beiden Beispiele hier: http://attardi.org/labels/

ich in der Regel die zweite Methode verwenden (labels2) auf meinem Formen.

Der gemeinsame Ansatz ist der Standardwert als Markierung zu verwenden, und dann entfernen, wenn das Feld den Fokus erhält.

ich wirklich diesen Ansatz nicht mögen, da es Zugänglichkeit und Nutzbarkeit Auswirkungen hat.

Stattdessen würde ich durch die Verwendung eines Standardelement neben dem Feld beginnen.

Wenn dann JavaScript aktiv ist, stellen eine Klasse auf einem Vorgängerelement, das einige neue Stile führt dazu, dass anwenden:

  • positionieren Relativ ein Div, die die Eingabe und Label
    • enthält
  • Absolut positionieren das Label
  • Absolut positionieren Sie den Eingang am oberen Rand des Etiketts
  • Entfernen Sie die Grenzen des Eingangs und legen Sie den Hintergrund-Farbe transparent

Dann, und auch, wenn der Eingang den Fokus verliert, ich testen, um zu sehen, ob die Eingabe einen Wert hat. Ist dies der Fall, stellen Sie sicher, dass ein Vorfahre Element eine Klasse hat (zum Beispiel „hide-label“), ansonsten sicher, dass es nicht die Klasse hat.

Jedes Mal, wenn der Eingang den Fokus erhält, diese Klasse gesetzt.

Das Stylesheet, dass die Klassennamen in einem Selektor verwenden würde das Etikett zu verstecken (mit text-indent: -9999px, in der Regel).

Dieser Ansatz bietet eine anständige Erfahrung für alle Benutzer, einschließlich solcher mit JS deaktiviert und diejenigen Screen-Reader verwenden.

Ich habe Lösungen zusammengestellt Vorschlag @Cory Walker mit den Erweiterungen von @Rafael und die eine Form @Tex Hexe war ein bisschen für mich kompliziert und kam mit einer Lösung, die hoffentlich ist

fehlersicher mit JavaScript und CSS deaktiviert.

Es manipuliert mit der Hintergrundfarbe des Formularfeldes zu zeigen, / das Etikett verbergen. 

<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>

Sehen Sie das Skript in Aktion: 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">

Auch ein onblur Ereignis hinzufügen.

Wenn Sie beginnen, die Eingabe wird es leer disappear.If es wieder angezeigt wird. 

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

einfachste Weg ...

Bitte benutzen Sie PlaceHolder.JS seine Werke in allen Browsern und sehr einfach für nicht html5 kompatiblen Browsern   http://jamesallardice.github.io/Placeholders.js/

Ein Hinweis über HTML-Eigenschaft Platzhalter und das Tag Textbereich , stellen Sie sicher, dass es keine ist jeder Raum zwischen <textarea> und </textarea>, da sonst die Platzhalter funktioniert nicht, zum Beispiel: 

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

Das wird nicht funktionieren, weil es ein Raum zwischen ist ...

verwenden diese

Stil: 

<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");

Denken Sie daran defaultLabelClean () aufrufen Funktion vor Form einzureichen.

gute Arbeit

Sie brauchen kein Javascript-Code für das ...
Ich glaube, Sie das Platzhalter Attribut bedeuten. Hier ist der Code: 

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



Der Standardtext wird grau-ish und wenn darauf geklickt wird, wird es verschwinden!

Ich denke, die gut das Label zu halten und nicht Platzhalter zu verwenden, wie oben erwähnt. Das ist gut für UX wie hier erklären: https://www.smashingmagazine.com/2018/03 / ux-Kontakt-Formulare-essentials-Conversions /

Hier Beispiel mit Etikett im Eingabefeld:  codepen.io/jdax/pen/mEBJNa

Hier ist ein einfaches Beispiel, alle es tut, ist ein Bild-Overlay (mit dem, was Sie wollen Wortlaut). Ich sah irgendwo diese Technik. Ich bin mit der Prototyp-Bibliothek, so dass Sie bei Verwendung von etwas anderes ändern müssen. Mit dem Laden von Bildern nach window.load versagt es anmutig, wenn Javascript deaktiviert ist. 

<!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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top