jQueryを使用してプレースホルダーテキストを変更する


206

私はjQueryプレースホルダープラグイン(https://github.com/danielstocks/jQuery-Placeholder)を使用しています。ドロップダウンメニューの変更に伴い、プレースホルダーテキストを変更する必要があります。しかし、それは変化していません。これがコードです:

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
});

私のHTML:

<div class="filterbox">
        <select name="ddselect" id="serMemdd">
            <option value="1" selected="selected">Search by Name</option>
            <option value="2">Search by ID</option>
            <option value="3">Search by Location</option>
        </select>
        <input id="serMemtb" type="text" style="width: 490px" placeholder="Type a name    (Lastname, Firstname)" />
        <input id="seMemBut" type="button" value="Search" />
    </div>

誰かがこれを理解できますか?


あなたのhtmlも提供できますか?
ティモシーアーロン

@TimothyAaron HTMLを提供しました
Krishh

@Blankasaurus-BSにはこれが組み込まれていません。プレースホルダー属性は最新のブラウザーでネイティブに機能しますが、IEのポリフィルはありません:github.com/twitter/bootstrap/issues/2401
Theunissen

回答:


367
$(document).ready(function(){ 
  $('form').find("input[type=textarea], input[type=password], textarea").each(function(ev)
  {
      if(!$(this).val()) { 
     $(this).attr("placeholder", "Type your answer here");
  }
  });
});

このコードをコピーしてjsファイルに貼り付けます。これにより、サイト全体のすべてのプレースホルダーテキストが変更されます。


1
if通常、入力要素に値があるかどうかに関係なくプレースホルダーを設定するため、-statement を省略する必要があります。それ以外の場合、ユーザーが入力要素を空にしてもプレースホルダーは表示されません。
isnot2bad 2018年

99

次のコードを使用して、IDでプレースホルダーを更新できます。

$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();

16

単にあなたが使うことができます

$("#yourtextboxid").attr("placeholder", "variable");

ここで、変数が文字列の場合、上記のように使用できます。変数の場合は、二重引用符なしで「変数」のような名前に置き換えます。

例:$("#youtextboxid").attr("placeholder", variable); 機能します。


13

プラグインは非常に堅牢に見えません。.placeholder()もう一度呼び出すと、Placeholderイベントが古いインスタンスにバインドされたまま、新しいインスタンスが作成されます。

コードを見ると、次のことができるように見えます。

$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();

編集

placeholderあるHTML5属性はそれをサポートしていない誰だか分かりますか?

プラグインは、IEがプラグインをサポートしていないという事実を克服するのに実際に役立つようには見えないので、私のソリューションは機能していますが、プラグインはサポートしていません。見つけられるものを見つけてみませんか。


8

$(this).val()文字列です。parseInt($(this).val(), 10)「1」を使用または確認します。10は10を表すことです。

$(function () {
    $('input[placeholder], textarea[placeholder]').blur();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == '1') {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == '2') {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == '3') {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

または

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = parseInt($(this).val(), 10);
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

その他のプラグイン

oriは、使用しているプラ​​グインがIEのHTMLの失敗を克服しないことを私の注意にもたらしました。

次のようなものを試してください:http : //archive.plugins.jquery.com/project/input-placeholder


OPに関する注意:changeイベントは、テキスト入力ではなく、選択ボックスにフックされることに注意してください。$('#serMemdd').change(function () {
ベンジャム

彼は、serMemdd DDLに基づいて、プレースホルダーテキストをコンテキスト依存にすることを試みていると思います。私は知らないよ。
ジェイソン

ええ、それは私のように見えますが、彼のJSでは、彼は変更イベントをtextareaにフックしています。これは、彼が求めている機能である場合、それがフックされるべき場所ではありません。そのため、彼が気付かなかった場合に備えて、コードの変更に関するメモを呼び出しました。
ベンジャム

.placeholder()が2回以上呼び出すと混乱するため、blur()で私の回答を更新しました。設定するには、doc.readyで呼び出す必要があります。
ジェイソン

<select name = "ddselect" id = "serMemdd">
Jason

2

JavaScriptとJqueryを使用した動的プレースホルダーの実際の例http://jsfiddle.net/ogk2L14n/1/

<input type="text" id="textbox">
 <select id="selection" onchange="changeplh()">
     <option>one</option>
     <option>two</option>
     <option>three</option>
    </select>

function changeplh(){
    debugger;
 var sel = document.getElementById("selection");
    var textbx = document.getElementById("textbox");
    var indexe = sel.selectedIndex;

    if(indexe == 0) { 
     $("#textbox").attr("placeholder", "age");

}
       if(indexe == 1) { 
     $("#textbox").attr("placeholder", "name");
}
}

2

jqueryを使用してプレースホルダーテキストを変更する

これを試して

$('#selector').attr("placeholder", "Type placeholder");

1

最初の行を一番下に移動すると、次のようになります。http//jsfiddle.net/tcloninger/SEmNX/

$(function () {
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
    $('input[placeholder], textarea[placeholder]').placeholder();
});

...まあ、私にとってChromeのプレースホルダー属性はとにかく変わります。IEで確認すると、属性が変更されていますが、実際には表示されません。それは信頼できるプラグインですか?
ティモシーアーロン

0

入力がdiv内にある場合は、これを試すことができます。

$('#div_id input').attr("placeholder", "placeholder text");


0

これは私のために働きました:

jQuery('form').attr("placeholder","Wert eingeben");

しかし今これは動作しません:

// Prioritize "important" elements on medium.
            skel.on('+medium -medium', function() {
                jQuery.prioritize(
                    '.important\\28 medium\\29',
                    skel.breakpoint('medium').active
                );
            });

0
$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});

0
$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.