Detectar si el texto en un elemento de entrada (tipo = texto) excede los límites en FireFox

¿Hay alguna forma de detectar si el contenido (valor) de un elemento de entrada (tipo = texto) excede su tamaño?Detectar si el texto en un elemento de entrada (tipo = texto) excede los límites en FireFox

En Internet Explorer, la propiedad scrollWidth será mayor que cuando esto sea cierto. Sin embargo, en Firefox, scrollWidth siempre es igual a style.width y es un error conocido (https://bugzilla.mozilla.org/show_bug.cgi?id=343143), bueno, tal vez no es un error porque Mozilla simplemente no considera que un elemento de entrada sea "desplazable", pero aún así. De acuerdo con esta opinión, el elemento textarea de Firefox establece correctamente la propiedad scrollWidth cuando el contenido sobrepasa los límites.

Actualmente, mis únicos pensamientos son o bien: (a) el uso de un elemento de área de texto en su lugar y limitarlo a la entrada de línea única de alguna manera o (b) En cada caso keyup de la entrada, copiar el contenido de una manera similar elemento div en forma y mira en su propiedad scrollWidth.

¿Hay alguna forma mejor de lograr esto en FF?

Fuente

2011-01-29 userx

¿qué hay de comparar la 'longitud' de la cadena con el atributo' size' del cuadro de texto? – drudge

@jnpcl - Esto solo funcionaría si se usa una fuente de ancho fijo y el estilo css en el elemento 'input' no estaba en uso. Para una fuente de ancho variable o casos en los que desee definir explícitamente el ancho de un elemento 'input' (por ejemplo' style = "width: 100px;" '), no sería suficiente verificar la longitud. – userx

¿Qué sucede si mides la longitud de la cuerda en píxeles? entonces podrías comparar el ancho de la entrada con él.
Aquí se muestra cómo puede obtener la longitud de píxel de una cadena con jquery: Determine Pixel Length of String in Javascript/jQuery?.
me gustaría hacer algo como:

 
function inputExceeded(el){ 
    var s = $('<span >'+el.val()+'</span>'); 
    s.css({ 
     position : 'absolute', 
     left : -9999, 
     top : -9999, 
     // ensure that the span has same font properties as the element 
     'font-family' : el.css('font-family'), 
     'font-size' : el.css('font-size'), 
     'font-weight' : el.css('font-weight'), 
     'font-style' : el.css('font-style') 
    }); 
    $('body').append(s); 
    var result = s.width() > el.width(); 
    //remove the newly created span 
    s.remove(); 
    return result; 
}

Fuente

2011-01-29 09:17:57

Me gusta esta respuesta, pero ¿hay alguna idea de qué tan confiable es esta solución? No sé qué función de jQuery 'width()' está viendo (CSS 'style.width',' offsetWidth', 'clientWidth', etc.), pero sí sé que algunas propiedades de CSS no tendrán valor a menos que conjunto. – userx

-1

Sé que esto es un viejo-ish pregunta, pero tal vez esto ayude a alguien. jQuery disparará un evento 'scroll' si el texto ingresado es más ancho que el ancho de la entrada. Desafortunadamente, el evento 'scroll' no se dispara si el texto se inyecta en la entrada con JavaScript. Además, este ejemplo no reduce la entrada si el usuario reduce el texto.

$('input[type=text]').on('scroll.input-expander', function(event, element){ 
    $(this).css('width','100%'); 
    $(this).unbind('scroll.input-expander'); 
});

Editar: me he dado cuenta de que el evento de desplazamiento se activa sólo cuando el cursor va más allá del borde de la entrada.

Fuente

2012-08-01 21:33:16 ErikPhipps

Detectar si el texto en un elemento de entrada (tipo = texto) excede los límites en FireFox

Respuesta

Cuestiones relacionadas