web-dev-qa-db-ja.com

解像度に基づいてプレースホルダーテキストを交換（メディアクエリ）

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

現在、プレースホルダーテキストyour emailが内部にありますが、400（つまり、最大399px幅）未満の画面では、Join our newsletterの別のプレースホルダーonlyが必要です。

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>
jqueryhtmlresponsive-designplaceholder
26
Francesca

純粋なCSSソリューションとして、2つの<input>s-異なるplaceholdersを持つ-異なる画面サイズで表示される-ここの例 =：

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

重要なメモ：

  1. この場合、2つのidのinputが異なることを確認する必要があります。さらに、idがlabel要素の使用のために<input>に追加された場合、代わりにinputをlabelでラップすることができます。

  2. 同じinputを持つ複数のnameを使用すると、HTTPリクエストメソッドのname/valueペアがオーバーライドされます。

可能な解決策の1つは、（上記の例のように）name属性に配列名の値を使用し、それをサーバー側で処理することです（name値を保持することをお勧めします小文字）。

あるいは、その値がサーバーに送信されないようにするために、disable非表示inputを使用することもできます。

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

Pure CSS SolutionでJavaScriptを使用しますか？多分...多分...多分...しかし、今日、現代の世界ではJavaScriptが空のWebサイトはありません。問題を取り除くのに役立つ場合は、手を少し汚れても大丈夫です！。

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

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

13
mtt

少し面倒ですが、DOM内の要素を複製せずに純粋なHTML/CSS（JavaScriptは不要）でこれを行うことができますifテキストを表示/非表示にするだけで、変更する必要はありません。

ハックは、次のように、幅（またはメディアクエリが何であれ）に応じてプレースホルダーテキストのスタイルを変更し、不透明度を変更して表示または非表示にすることです。

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

画面サイズを確認し、それに応じて行動してください：

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

「画面サイズ」を明示的に要求したことに注意してください。ウィンドウサイズとサイズ変更イベントは、まったく別のものです。

0
adeneo

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

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

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'}">
0
Nadav SInai