使用jQuery更改占位符文本

Question

我正在使用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>

有谁能够理解这个问题吗？

- Krishh

---

你能提供你的HTML吗？ - Timothy Aaron

@TimothyAaron 我已经提供了HTML。 - Krishh

@Blankasaurus-BS没有内置此功能。占位符属性在现代浏览器中可以自然工作，但IE没有填充程序：https://github.com/twitter/bootstrap/issues/2401 - Jannie Theunissen

Answer 1

$(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文件中，这将更改整个站点的所有占位符文本。

- Neshat Khan

---

通常情况下，您应该省略if语句，因为通常您希望设置占位符，无论输入元素是否有值。否则，如果用户清空输入元素，则不会显示任何占位符。 - isnot2bad

Answer 2

你可以使用以下代码通过id更新占位符：

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

- Creator

Answer 3

简单地说，您可以使用

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

如果变量是字符串，那么你可以像上面那样使用，如果它是变量，请将其替换为名称，例如没有双引号的“variable”。

例如：$("#youtextboxid").attr("placeholder", variable); 它会起作用。

- Krish

---

我已经测试过了，但似乎如果之前有值的话，你需要先清除它。 __ $ ("#youtextboxid").val(""); __ - Ajowi

Answer 4

这个插件似乎不是很健壮。如果您再次调用.placeholder()，它会在旧的实例上绑定事件的同时创建一个新的Placeholder实例。

从代码来看，你可以这样做：

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

---

编辑

placeholder 是一个HTML5属性，你猜谁不支持它？

你的插件似乎并不能解决IE不支持该属性的问题，所以尽管我的解决方案有效，但是你的插件不行。为什么不找一个可以解决的呢？

- ori

Answer 5

$(this).val()是一个字符串。使用parseInt($(this).val(), 10)或检查是否为'1'。数字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

- Jason

---

注意：OP，还要注意更改事件是钩子选择框，而不是文本输入。$（'#serMemdd'）.change（function（）{ - Benjam

我认为他试图根据serMemdd DDL使占位符文本具有上下文敏感性。我不知道。 - Jason

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

我已经尝试了您的代码，但在IE中无法正常工作。在Chrome中，由于HTML5占位符，它可以正常工作。在IE中发生的情况是，在从下拉列表中进行选择后，占位符变为普通文本（带有先前的文本），我必须手动删除它，当我单击文本框外部时，正确的占位符文本才会出现。 - Krishh

我认为这仍然回答了您最初的问题，即为什么您的代码没有被执行。如果您想要IE支持，您将不得不获取一个不依赖于HTML5的新插件。抱歉 =( - Jason

Answer 6

$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});

- Bunty Kazi

Answer 7

使用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");
}
}

- overflow

Answer 8

使用jQuery更改占位符文本

试试这个

尝试下面的代码：

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

- Love Kumar

Answer 9

如果输入框在div内部，你可以尝试这样做：

如果输入框在div内部，您可以尝试以下方法：

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

- Love Kumar

Answer 10

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

- Bunty Kazi