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.