Текст с заменой запятой на основе разрешения (медиа-запрос)

Я работаю над отзывчивым дизайном. Я ударил немного стены, и там не было места для окна input, а это label. Поэтому я решил скрыть ярлык меньшими размерами экрана.

В настоящее время он содержит текст-заполнитель your email внутри него, но я хочу только на экранах размером менее 400 (так до 399 пикселей в ширину) другой держатель места Join our newsletter.

Я считаю, что для выполнения этого потребуется некоторое JS, а не что-нибудь с CSS.

По существу: если размер экрана меньше 400: placeholder text = Подпишитесь на нашу рассылку

еще: placeholder text = Ваш адрес электронной почты.

Вот HTML, который у меня есть:

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

Ответ 1

В качестве чистого решения CSS мы могли бы иметь два <input> - с разными placeholder -, которые показаны в разных размерах экрана - Пример здесь

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

Ответ 2

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/

Ответ 3

В то время как немного взломанный, это можно сделать в чистом HTML/CSS (без необходимости использования javascript) без дублирования элементов в DOM, если вам нужно только показать/скрыть текст, а не изменить его.

Взлом - это просто стиль текста заполнителя по-разному в зависимости от ширины (или любого другого вашего медиа-запроса) и изменения непрозрачности, чтобы заставить его появляться или исчезать, например:

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

Ответ 4

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

Ответ 5

Просто проверьте размер экрана и действуйте соответственно:

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

Обратите внимание, что вы явно просили "размер экрана", размер окна и изменения размера - это нечто совсем другое.

Ответ 6

если вы используете angular и lodash, вы можете использовать эту директиву, которую я написал для моего использования в одном проекте, где дизайнер настаивал...

lodash используется только для того, чтобы спасти нас, записывая функцию debouncer для событий window.resize, можно заменить в 5 минутах от шаблона setTimeout thingy...

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

используйте следующее:

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