2009-08-19 15 views
17

Estoy tratando de implementar una función genérica para un formulario con varios campos en el siguiente formato.Javascript: establecer texto de etiqueta

<label id="LblTextCount"></label> 
<textarea name="text" onKeyPress="checkLength(this, 512, LblTextCount)"> 
</textarea> 

Y el siguiente JavaScript:

function checkLength(object, maxlength, label) { 
    charsleft = (maxlength - object.value.length); 

    // never allow to exceed the specified limit 
    if(charsleft < 0) { 
     object.value = object.value.substring(0, maxlength-1); 
    } 

    // I'm trying to set the value of charsleft into the label 
label.innerText = charsleft; 
    document.getElementById('LblTextCount').InnerHTML = charsleft; 
} 

La primera parte funciona bien, pero estoy no es capaz de establecer el valor charsleft en la etiqueta. ¿Qué estoy haciendo mal? Tenga en cuenta que estoy buscando un enfoque dinámico en lugar de codificar duro el nombre de la etiqueta en la función JS. JQuery estaría bien también :)


Solución - gracias a todos!

HTML

<label id="LblTextCount"></label> 
<textarea name="text"> 
</textarea> 

JS

$(document).ready(function() { 
    $('textarea[name=text]').keypress(function(e) { 
     checkLength($(this),512,$('#LblTextCount')); 
    }).focus(function() { 
     checkLength($(this),512,$('#LblTextCount')); 
    }); 
}); 

function checkLength(obj, maxlength, label) { 
    var charsleft = (maxlength - obj.val().length); 

    // never allow to exceed the specified limit 
    if(charsleft < 0) { 
     obj.val(obj.val().substring(0, maxlength-1)); 
    } 

    // set the value of charsleft into the label 
    $(label).html(charsleft); 
} 

Respuesta

22

InnerHTML debe ser innerHtml:

document.getElementById('LblAboutMeCount').innerHTML = charsleft; 

Usted debe vincular a su función checkLength a su área de texto con jQuery en lugar de llamarlo en línea y en vez intrusivamente:

$(document).ready(function() { 
    $('textarea[name=text]').keypress(function(e) { 
     checkLength($(this),512,$('#LblTextCount')); 
    }).focus(function() { 
     checkLength($(this),512,$('#LblTextCount')); 
    }); 
}); 

Puede neaten checkLength mediante el uso de más de jQuery, y yo no usaría 'objeto' como un parámetro formal:

function checkLength(obj, maxlength, label) { 
    charsleft = (maxlength - obj.val().length); 
    // never allow to exceed the specified limit 
    if(charsleft < 0) { 
     obj.val(obj.val().substring(0, maxlength-1)); 
    } 
    // I'm trying to set the value of charsleft into the label 
    label.text(charsleft); 
    $('#LblAboutMeCount').html(charsleft); 
} 

Así que si se aplica lo anterior, puede cambiar su margen de beneficio a:

<textarea name="text"></textarea> 
+0

¿Hay una manera elegante de obligar también checkLength() para onFocus respectiva onpaste sin duplicar el contenido del ready $ (document) (función()) función? – MrG

+0

@MrG - Lo es, ver mi edición. Además, no es que el evento pegar no sea entre navegadores. – karim79

+0

Tkx karim79, funciona perfectamente bien en una ventana separada (todos los navegadores se enumeran a continuación) pero falla dentro de una pestaña JQuery UI sin ningún error en la consola (FF/Safari/Opera falla, IE funciona bien). ¿Tienes una idea? ¡Muchas muchas gracias! – MrG

0

Para un enfoque dinámico, si las etiquetas están siempre delante de sus áreas de texto:

$(object).prev("label").text(charsleft); 
3

estás haciendo varias cosas mal. La explicación sigue al código corregido:

<label id="LblTextCount"></label> 
<textarea name="text" onKeyPress="checkLength(this, 512, 'LblTextCount')"> 
</textarea> 

Tenga en cuenta las comillas alrededor de la identificación.

function checkLength(object, maxlength, label) { 
    charsleft = (maxlength - object.value.length); 

    // never allow to exceed the specified limit 
    if(charsleft < 0) { 
     object.value = object.value.substring(0, maxlength-1); 
    } 

    // set the value of charsleft into the label 
    document.getElementById(label).innerHTML = charsleft; 
} 

En primer lugar, en su evento de prensa clave que necesita para enviar el identificador de etiqueta como una cadena para que se lea correctamente. En segundo lugar, InnerHTML tiene una i minúscula. Por último, como enviaste a la función el id. De cadena, puedes obtener el elemento mediante esa identificación.

Déjame saber cómo eso funciona para usted

EDITAR No es que al no declarar charsleft como var, se crea implícitamente una variable global. una forma mejor sería hacer lo siguiente cuando se declara en la función:

var charsleft = .... 
Cuestiones relacionadas