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?

Krishh
fonte
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.

Neshat Khan
fonte
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();
O Criador
fonte
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á.

Krish
fonte
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.

ori
fonte
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

Jason
fonte
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");
}
}
transbordar
fonte
2

alterar o texto do espaço reservado usando jquery

tente isso

$('#selector').attr("placeholder", "Type placeholder");
Love Kumar
fonte
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();
});
Timothy Aaron
fonte
... 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");
Love Kumar
fonte
0

tente isso

$('#Selector_ID').attr("placeholder", "your Placeholder");
Love Kumar
fonte
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
                );
            });

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