32

レスポンシブデザインに取り組んでいます。inputボックスを置くスペースがなくてちょっと壁にぶち当たりましたlabel。そのため、小さい画面サイズではラベルを非表示にすることにしました。

現在、そのyour email中にプレースホルダー テキストがありますが、400 未満の画面 (幅 399px まで) でのみJoin our newsletter、別のプレースホルダー.

これを実行するには、CSS ではなく JS が必要になると思います。

基本的に: 画面サイズが 400 未満の場合: プレースホルダー テキスト = ニュースレターに参加する

else: プレースホルダー テキスト = あなたのメールアドレス。

ここに私が持っているHTMLがあります:

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

7 に答える 7

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

デモ: http://jsfiddle.net/fcrX5/

于 2013-08-11T20:12:46.583 に答える
9

少しハッキリしていますが、これは純粋な 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);
    }
}
于 2014-04-07T06:12:10.367 に答える
1

このスクリプトには、プレースホルダーの初期設定と、ウィンドウのサイズ変更時のテキストの変更が含まれています。

    //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");
        }
    });
于 2017-02-14T16:22:44.987 に答える
0

angular と lodash を使用する場合は、デザイナーが主張した 1 つのプロジェクトで使用するために作成したこのディレクティブを使用できます...

lodash は、window.resize イベントのデバウンサー関数を作成する手間を省くためにのみ使用されます。5 分のボイラープレート setTimeout で置き換えることができます...

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'}">
于 2014-12-30T14:23:58.973 に答える