使用 jQuery 更改占位符文本

Posted 2023-05-09

【中文标题】使用 jQuery 更改占位符文本

【英文标题】：Change Placeholder Text using jQuery

【发布时间】：2012-03-03 05:15:39

【问题描述】：

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

@Blankasaurus - BS 没有内置此功能。占位符属性在现代浏览器中本机工作，但 IE 没有 polyfill：github.com/twitter/bootstrap/issues/2401

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

【讨论】：

你应该省略if-statement，因为通常你想设置占位符，不管输入元素是否有值。否则，如果用户清空输入元素，则不会显示占位符。

【参考方案2】：

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

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

【参考方案3】：

你可以使用

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

如果变量是字符串，那么你可以像上面一样使用，如果它是变量，则将其替换为“变量”之类的名称，不带双引号。

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

【讨论】：

我已经对此进行了测试，但如果它存在，您似乎需要先清除该值。 $("#youtextboxid").val("");

【参考方案4】：

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

看代码，看起来你可以做到：

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

---

编辑

placeholder 是 HTML5 attribute、guess who's not supporting it?

您的插件似乎并不能真正帮助您克服 IE 不支持它的事实，所以虽然我的解决方案有效，但您的插件却没有。你为什么不找到一个呢。

【参考方案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

【讨论】：

OP注意事项：还请注意，更改事件与选择框挂钩，而不是文本输入。 $('#serMemdd').change(function ()

我认为他正在尝试基于 serMemdd DDL 使占位符文本上下文敏感。我不知道。

是的，在我看来就是这样，但在他的 JS 中，他将更改事件与 textarea 挂钩，如果这是他所追求的功能，那么它不应该被挂钩。这就是为什么我在你的代码中指出了这个变化的原因，以防他不知道。

用 blur() 更新了我的答案，因为 .placeholder() 如果你不止一次调用它，就会搞砸。你应该在你的 doc.ready 中调用它来设置它。

【参考方案6】：

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

【参考方案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");

【参考方案8】：

使用 jquery 更改占位符文本

试试这个

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

【参考方案9】：

如果输入在 div 内，你可以试试这个：

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

【参考方案10】：

试试这个

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

【参考方案11】：

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

【参考方案12】：

将第一行移到底部对我有用：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 中检查它时，该属性正在更改，但实际上并没有显示它。你确定这是一个可靠的插件吗？

【参考方案13】：

这对我有用：

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
                );
            );