Cambiar texto de marcador de posición usando jQuery


206

Estoy usando un complemento de marcador de posición jQuery (https://github.com/danielstocks/jQuery-Placeholder). Necesito cambiar el texto del marcador de posición con el cambio en el menú desplegable. Pero no está cambiando. Aquí está el 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();
        }
    });
});

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

¿Puede alguien resolver esto?


¿Puedes proporcionar tu html también?
Timothy Aaron

@TimothyAaron He proporcionado el HTML
Krishh

@Blankasaurus - BS no tiene esto incorporado. El atributo de marcador de posición funciona de forma nativa en los navegadores modernos, pero no hay polyfill para IE: github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Respuestas:


368
$(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 y pegue este código en su archivo js, ​​esto cambiará todo el texto de marcador de posición de todo el sitio.


1
Debería omitir la ifdeclaración, ya que generalmente desea establecer el marcador de posición sin importar si el elemento de entrada tiene un valor o no. De lo contrario, no se muestra ningún marcador de posición si el usuario vacía el elemento de entrada.
isnot2bad

99

Puede usar el siguiente código para actualizar un marcador de posición por id:

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

16

simplemente puedes usar

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

donde, si la variable es una cadena, puede usarla como se indica arriba, si es variable, reemplácela con el nombre como "variable" sin comillas dobles.

Por ejemplo: $("#youtextboxid").attr("placeholder", variable); funcionará.


13

El complemento no se ve muy robusto. Si .placeholder()vuelve a llamar , crea una nueva Placeholderinstancia mientras los eventos aún están vinculados a la anterior.

Mirando el código, parece que podrías hacer:

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

EDITAR

placeholderes un atributo HTML5 , ¿ adivina quién no lo admite?

Su complemento realmente no parece ayudarlo a superar el hecho de que IE no lo admite, por lo que mientras mi solución funciona, su complemento no lo hace. ¿Por qué no encuentras uno que lo haga?


8

$(this).val()es una cuerda Use parseInt($(this).val(), 10)o verifique '1'. El diez es denotar la 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();
        }
    });
});

O

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

Otros complementos

ori me ha llamado la atención de que el complemento que está utilizando no supera la falla de IEs HTML.

Pruebe algo como esto: http://archive.plugins.jquery.com/project/input-placeholder


Nota para OP: también tenga en cuenta que el evento de cambio está conectado al cuadro de selección, no a la entrada de texto. $('#serMemdd').change(function () {
Benjam

Creo que está tratando de hacer que el texto del marcador de posición sea sensible al contexto basado en el DDL serMemdd. No se.
Jason

Sí, eso es lo que me parece, pero en su JS, tiene el evento de cambio conectado al área de texto, que no es donde debería engancharse si esa es la funcionalidad que busca. Es por eso que llamé una nota a ese cambio en su código, en caso de que no lo supiera.
Benjam

Actualicé mi respuesta con blur () ya que .placeholder () arruina las cosas si lo llamas más de una vez. Sin embargo, debe llamarlo en su documento listo para configurarlo.
Jason

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

2

ejemplo de trabajo de marcador de posición dinámico usando Javascript y 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

cambiar el texto del marcador de posición usando jquery

prueba esto

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

1

Mover su primera línea hacia abajo lo hace por mí: 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();
});

... bueno, el atributo de marcador de posición está cambiando en Chrome para mí de todos modos. Cuando lo reviso en IE, el atributo está cambiando, pero en realidad no lo está mostrando. ¿Estás seguro de que es un complemento confiable?
Timothy Aaron

0

Si la entrada está dentro del div, puede intentar esto:

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

0

prueba esto

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

0

esto funcionó para mí:

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

pero ahora esto no 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");
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.