it-swarm.com.de

Platzhaltertext basierend auf Auflösung austauschen (Medienabfrage)

Ich arbeite an einem responsiven Design. Ich habe ein bisschen von einer Mauer getroffen, da nicht genügend Platz für eine input-Box vorhanden ist und es label ist. Daher habe ich mich entschlossen, das Label auf kleineren Bildschirmgrößen auszublenden.

Derzeit hat es den Platzhaltertext your email darin, aber ich möchte nur auf Bildschirmen mit weniger als 400 (also bis zu 399px breit) einen anderen Platzhalter von Join our newsletter.

Ich denke, dass es einige JS geben muss, um dies durchzuführen, und nicht irgendetwas mit CSS.

Im Wesentlichen: Wenn Bildschirmgröße kleiner als 400: Platzhaltertext = Abonnieren Sie unseren Newsletter

else: placeholder text = Ihre E-Mail-Adresse.

Hier ist der HTML-Code, den ich habe:

<div id="mc_embed_signup">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>
24
Francesca

Als reine CSS-Lösung könnten wir zwei <input>s haben - mit unterschiedlichen placeholders - die in verschiedenen Bildschirmgrößen angezeigt werden - Beispiel hier:

input.large { display: inline-block; }
input.small { display: none; }

@media (max-width: 399px) { 
  input.large { display: none; }
  input.small { display: inline-block; }
}
<input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email">
<input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">

Wichtige Notizen:

  1. In diesem Fall sollten wir sicherstellen, dass die id unserer beiden input unterschiedlich sind. Außerdem, wenn id zu <input> hinzugefügt wird, nur weil es für label -Elemente verwendet wird, können wir input stattdessen label umschließen.

  2. Wenn Sie mehr als ein input mit demselben name verwenden, wird das name/value -Paar in der HTTP-Anforderungsmethode überschrieben.

Eine mögliche Lösung besteht darin, einen Array-Namen für das name -Attribut zu verwenden (wie im obigen Beispiel) und ihn serverseitig zu behandeln (Es ist besser, name -Werte in Kleinbuchstaben zu halten ) .

Alternativ könnten wir disable das versteckte input, um zu verhindern, dass sein Wert an den Server gesendet wird:

$('input:hidden').prop("disabled", true);

Verwendung von JavaScript in einer reinen CSS-Lösung? Vielleicht ... vielleicht nicht ... aber heutzutage enthalten Websites in der modernen Welt kein JavaScript mehr. Wenn es hilft, das Problem loszuwerden, ist es in Ordnung, die Hände ein wenig schmutzig zu machen !.

24
Hashem Qolami
if ($(window).width() < 400 ) {
    $("input[type='email']").attr("placeholder","join our newsletter");
}
else { $("input[type='email']").attr("placeholder","your email");}

demo: http://jsfiddle.net/fcrX5/

12
mtt

Dies ist zwar etwas hackig, aber in reinem HTML/CSS (kein JavaScript erforderlich) möglich, ohne Elemente im DOM if zu duplizieren. Sie müssen lediglich den Text ein-/ausblenden, nicht ändern.

Der Hack besteht darin, den Platzhaltertext einfach je nach Breite (oder was auch immer Ihre Medienanfrage ist) anders zu gestalten und die Deckkraft so zu ändern, dass er wie der folgende erscheint oder verschwindet:

input.responsive::-webkit-input-placeholder,
input.responsive::-moz-placeholder,
input.responsive:-moz-placeholder,
input.responsive:-ms-input-placeholder { 
    color: rgba(25, 25, 25, 1.0);
}

@media (max-width: 399px) { 
    input.responsive::-webkit-input-placeholder,
    input.responsive::-moz-placeholder,
    input.responsive:-moz-placeholder,
    input.responsive:-ms-input-placeholder { 
        color: rgba(0, 0, 0, 0);
    }
}
6
patr1ck
  This script include initial setting of the placeholder and changing on resizing the window:


//set responsive mobile input field placeholder text
        if ($(window).width() < 769) {
            $("input").attr("placeholder", "Short text");
        }
        else {
            $("input").attr("placeholder", "Long text for wide input filed");
        }
        $(window).resize(function () {
            if ($(window).width() < 769) {
                $("input").attr("placeholder", "Short text");
            }
            else {
                $("input").attr("placeholder", "Long text for wide input field");
            }
        });
1
daisylaflamme

Überprüfen Sie einfach die Bildschirmgröße und handeln Sie entsprechend:

$(function() {
    var txt = screen.width < 400 ? 'Join our newsletter' : 'Your email';
    $('#mce-EMAIL').attr('placeholder', txt);
});

Beachten Sie, dass Sie explizit nach "Bildschirmgröße" gefragt haben. Fenstergröße und Größenänderungsereignisse sind etwas anderes.

0
adeneo

wenn Sie "angle" und "lodash" verwenden, können Sie diese Direktive verwenden, die ich für meine Verwendung in einem Projekt geschrieben habe, in dem der Designer darauf bestand ...

lodash wird nur verwendet, um uns das Schreiben der Debouncer-Funktion für window.resize -Ereignisse zu ersparen, kann in 5 Minuten von boilerplate setTimeout-Ding ersetzt werden.

angular.module('yourModuleNameHere').directive('mediaPlaceholder', function    ($window, $parse) {
    return {
        restrict: 'A',
        link: function ($scope, $elem, $attrs) {
            var defObj = $parse($attrs.mediaPlaceholder)($scope);

            function setPlaceholder() {
                var lastFitting, windowWidth = $($window).width();
                angular.forEach(defObj, function (placeholderValue,widthSetting) {
                    if (parseInt(widthSetting) <= windowWidth) {
                        lastFitting = placeholderValue;
                    }
                });
                $elem.attr('placeholder', lastFitting);
            }

            setPlaceholder();
            $($window).resize(_.debounce(setPlaceholder, 40));
        }
    };
})

verwenden Sie wie folgt:

<input type="search" media-placeholder="{0:'search',989:'long search placeholder'}">
0
Nadav SInai