私は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>
誰もがこれを理解することはできますか?
$(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ファイルに貼り付けます。これにより、サイト全体のすべてのプレースホルダテキストが変更されます。
次のコードを使用して、プレースホルダをIDで更新できます。
$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();
プラグインはそれほど堅牢には見えません。もう一度.placeholder()
を呼び出すと、イベントがまだ古いインスタンスにバインドされている間に、新しいPlaceholder
インスタンスが作成されます。
コードを見ると、できることのように見えます。
$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
編集
placeholder
は HTML5属性 、 誰がそれをサポートしていないと思いますか?
あなたのプラグインはIEがそれをサポートしていないという事実を克服するのを実際には助けていないようです。それができるものを見つけないでください。
単にあなたが使用することができます
$("#yourtextboxid").attr("placeholder", "variable");
ここで、variableがstringの場合は上記のように使用でき、それがvariableの場合は二重引用符を付けずに "variable"のような名前に置き換えます。
例:$("#youtextboxid").attr("placeholder", variable);
それは動作します。
$(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
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");
}
}
あなたの最初の行を一番下に移動すると私のためにそれをします: 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();
});
jqueryを使用してプレースホルダーテキストを変更する
これを試してください
$('#selector').attr("placeholder", "Type placeholder");
入力がdiv内にある場合、これを試すことができます:
$('#div_id input').attr("placeholder", "placeholder text");