Alterar texto de espaço reservado usando jQuery


206

Estou usando um plug-in de marcador de posição do jQuery (https://github.com/danielstocks/jQuery-Placeholder). Preciso alterar o texto do espaço reservado com a alteração no menu suspenso. Mas isso não está mudando. Aqui está o código:

$(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();
        }
    });
});

Meu 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>

Alguém pode descobrir isso?


Você também pode fornecer seu html?
— Timothy Aaron

@TimothyAaron Eu forneci o HTML
— Krishh

@Blankasaurus - não BS não tem este construído em atributo de espaço reservado funciona nativamente em navegadores modernos, mas não há polyfill para o IE:. Github.com/twitter/bootstrap/issues/2401
— Jannie Theunissen

Respostas:


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

Copie e cole esse código no seu arquivo js. Isso mudará todo o texto do espaço reservado no site inteiro.


1
Você deve omitir a ifdeclaração, pois geralmente você deseja definir o espaço reservado, independentemente de o elemento de entrada ter um valor ou não. Caso contrário, nenhum espaço reservado será mostrado se o usuário esvaziar o elemento de entrada.
— isnot2bad

99

Você pode usar o seguinte código para atualizar um espaço reservado por ID:

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

16

simplesmente você pode usar

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

onde, se variável for string, você poderá usar como acima, se for variável, substitua-o pelo nome como "variable" sem aspas duplas.

por exemplo: $("#youtextboxid").attr("placeholder", variable); funcionará.


13

O plugin não parece muito robusto. Se você ligar .placeholder()novamente, ele cria uma nova Placeholderinstância enquanto os eventos ainda estão vinculados à antiga.

Olhando para o código, parece que você poderia fazer:

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

EDITAR

placeholderé um atributo HTML5 , adivinhe quem não o suporta?

Seu plug-in não parece realmente ajudá-lo a superar o fato de que o IE não o suporta; portanto, enquanto minha solução funciona, seu plug-in não. Por que você não encontra um que encontre.


8

$(this).val()é uma string. Use parseInt($(this).val(), 10)ou verifique '1'. O dez é para denotar a base 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();
        }
    });
});

Ou

$(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();
        }
    });
});

Outros plugins

A ori trouxe à minha atenção que o plug-in que você está usando não supera a falha de HTML do IEs.

Tente algo assim: http://archive.plugins.jquery.com/project/input-placeholder


Nota para OP: Observe também que o evento de alteração está ligado à caixa de seleção, não à entrada de texto. $('#serMemdd').change(function () {
— Benjam

Acho que ele está tentando tornar o contexto de texto do espaço reservado sensível com base no DDL serMemdd. Não sei.
— Jason

Sim, é o que parece para mim, mas em seu JS, ele tem o evento de mudança conectado à área de texto, que não é onde deve ser conectado se essa é a funcionalidade que ele procura. Por isso, chamei uma nota para essa alteração no seu código, caso ele não estivesse ciente.
— Benjam

Atualizei minha resposta com blur (), já que .placeholder () estraga tudo se você chamar mais de uma vez. Você deve chamá-lo no seu doc.ready para configurá-lo embora.
— 10242 Jason

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

2

exemplo funcional de espaço reservado dinâmico usando Javascript e 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

alterar o texto do espaço reservado usando jquery

tente isso

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

1

Mover sua primeira linha para o fundo faz isso por mim: 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();
});

... bem, o atributo placeholder está mudando no Chrome para mim de qualquer maneira. Quando eu verifico no IE, o atributo está sendo alterado, mas na verdade não está sendo exibido. Tem certeza de que é um plugin confiável?
— Timothy Aaron

0

Se a entrada estiver dentro da div, você pode tentar o seguinte:

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

0

tente isso

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

0

isso funcionou para mim:

jQuery('form').attr("placeholder","Wert eingeben");

mas agora isso não funciona:

// 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");
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.