[SOLUCIONADO] saber si un texto es mayor que un input.

[Erickvk]

Buenas tengo un problema mi pantalla es responsive con lo cual no se el tamaño total de los input, me gustaría que si el usuario escribe un texto mas grande de lo que abarca el input que se pudiera detectar de alguna manera.

Gracias y perdón por las molestias.

[Erickvk]

También me puede valer cualquier solución que controle cuando hay overflow del campo.
Gracias.

[manuparquegiralda]

No entiendo muy bien por qué necesitas eso, pero así a priori solo se me ocurre que cojas el texto del input y lo introduzcas en un nuevo elemento que creas a través de javascript. A este le pones el estilo CSS de nowrap y midas su ancho. Lo comparas con el ancho del input y ya está.

Código Javascript:

var input = document.getElementById( "myImput" );
var value = input.value;
 
var p = document.createElement( "P" );
p.style.position= "absolute";
p.style.opacity = "0";
p.style.whiteSpace = "nowrap";
p.style.zIndex= "-1000";
p.innerHTML = value;
 
document.body.appendChild( p );
 
if( p.offsetWidth > input.offsetWidth ) {
    console.log( "El texto del input es más ancho que el input" );
} else {
    console.log( "El texto del input es menos ancho que el input" );
}
 
p.remove();
 

Ten presente que tendrás que tener en cuenta el tamaño y el tipo de la fuente del input para aplicarlo al elemento que crees, puede que tengas que tener en cuenta también el padding y el borde. Pero bueno, esta es la idea general, ya solo tienes que pulirla.

[Erickvk]

Gracias.

realmente lo quiero para que me salga un tooltip cuando sea mayor el texto al input.

el código ya existía y lo que hacía era crear un span con el texto y comprobaba los width de los objetos creados, lo malo es que creaba un span por cada input.

Había pensado borrar los elementos creados pero por alguna razón la segunda vez que se ejecutaba el código fallaba y siempre decía que era falso por muchos caracteres que tuviera el input.

lo he cambiado por esto.

if (parseInt(element.scrollWidth,10) >= parseInt(element.offsetWidth,10)) {