web-dev-qa-db-ja.com

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

私は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>

誰もがこれを理解することはできますか？

jqueryjquery-plugins
178
Krishh
$(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ファイルに貼り付けます。これにより、サイト全体のすべてのプレースホルダテキストが変更されます。

329
Neshat Khan

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

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

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

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

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

編集

placeholderは HTML5属性 、 誰がそれをサポートしていないと思いますか？

あなたのプラグインはIEがそれをサポートしていないという事実を克服するのを実際には助けていないようです。それができるものを見つけないでください。

11
ori

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

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

ここで、variableがstringの場合は上記のように使用でき、それがvariableの場合は二重引用符を付けずに "variable"のような名前に置き換えます。

例：$("#youtextboxid").attr("placeholder", variable);それは動作します。

10
Krish

$(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

8
Jason

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
overflow

あなたの最初の行を一番下に移動すると私のためにそれをします： 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();
});
1
Timothy Aaron

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

これを試してください

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

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

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