web-dev-qa-db-fra.com

Permuter le texte de substitution en fonction de la résolution (requête multimédia)

Je travaille sur un design réactif. J'ai heurté un mur avec un espace insuffisant pour une boîte input et c'est label. J'ai donc décidé de masquer l'étiquette sur des tailles d'écran plus petites.

À l'heure actuelle, il contient le texte de substitution your email, mais je veux uniquement sur les écrans de moins de 400 (donc jusqu'à 399 pixels de large) d'un espace réservé différent de Join our newsletter.

Je pense qu'il faudra un certain JS pour le faire, plutôt que tout ce qui est en CSS.

Essentiellement: Si la taille de l’écran est inférieure à 400: Placeholder text = Inscrivez-vous à notre newsletter

else: placeholder text = Votre email.

Voici le code HTML que j'ai:

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

En tant que solution CSS pure, nous pourrions avoir deux <input>s - ayant différents placeholders - qui sont affichés dans différentes tailles d'écran - Exemple ici:

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

Notes IMPORTANTES:

  1. Dans ce cas, nous devons nous assurer que la id de nos deux inputs est différente. De plus, si id est ajouté à <input> juste à cause de son utilisation pour les éléments label, nous pourrions simplement envelopper la input par label à la place.

  2. L'utilisation de plusieurs variables input qui ont le même name remplacera la paire name/value dans la méthode de requête HTTP.

Une solution possible consiste à utiliser une valeur de nom de tableau pour l'attribut name (comme dans l'exemple ci-dessus) et à la gérer côté serveur (Il est préférable de conserver les valeurs name en minuscules)}.

Alternativement, nous pourrions disable la input cachée afin d'empêcher que sa valeur soit envoyée au serveur:

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

Utilisation de JavaScript dans une Pure CSS Solution? Peut-être ... peut-être pas ... mais de nos jours, aucun site Web dans le monde moderne n'est vide de JavaScript. Si cela peut vous aider à vous en débarrasser, vous pouvez vous salir les mains !.

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

démo: http://jsfiddle.net/fcrX5/

12
mtt

Bien que cela soit un peu compliqué, il est possible de le faire en HTML/CSS pur (aucun javascript n'est requis) sans dupliquer les éléments dans le DOM si il vous suffit d'afficher/masquer le texte, pas de le modifier.

Le hack consiste simplement à styler différemment le texte de l'espace réservé en fonction de la largeur (ou de votre requête multimédia) et à modifier l'opacité pour le faire apparaître ou disparaître, comme suit:

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

Il suffit de vérifier la taille de l'écran et d'agir en conséquence:

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

Notez que vous avez explicitement demandé la "taille de l'écran", la taille de la fenêtre et les événements de redimensionnement sont complètement différents.

0
adeneo

si vous utilisez angular et lodash, vous pouvez utiliser la directive que j'ai écrite pour mon utilisation dans un projet où le concepteur a insisté.

lodash n’est utilisé que pour nous sauver lors de l’écriture de la fonction debouncer pour les événements window.resize.

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

utiliser comme ceci:

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