使用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 2012年

@Blankasaurus-BS没有内置此功能。Placeholder属性可在现代浏览器中正常运行,但没有适用于IE的polyfill
Theunissen

Answers:


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 '18年

99

您可以使用以下代码通过ID更新占位符:

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

16

只需您可以使用

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

其中,如果变量是字符串,则可以像上面一样使用,如果变量是变量,则将其替换为“ variable”之类的名称,且不要使用双引号。

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


13

该插件看起来不是很健壮。如果.placeholder()再次调用,它将创建一个新Placeholder实例,而事件仍然绑定到旧实例。

查看代码,您似乎可以做到:

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

编辑

placeholderHTML5属性猜猜谁不支持它?

您的插件似乎并没有真正帮助您克服IE不支持它的事实,因此尽管我的解决方案有效,但您的插件却不支持。你为什么找不到一个能做到的。


8

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


OP的注意事项:还请注意,更改事件是挂钩到选择框的,而不是文本输入的。$('#serMemdd').change(function () {
杰姆

我认为他试图基于serMemdd DDL使占位符文本上下文敏感。我不知道。
杰森

是的,这对我来说似乎就是这样,但是在他的JS中,他将change事件挂接到了textarea上,如果那是他所追求的功能,那么它不是应该挂接到它的地方。这就是为什么我在您不知道的情况下在您的代码中大声疾呼的原因。
杰姆

更新了我的答案与blur(),因为如果您多次调用.placeholder(),它会把东西弄乱。不过,您应该在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

试试这个

$('#Selector_ID').attr("placeholder", "your Placeholder");

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");
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.