Como saber si el navegador soporta las nuevas etiquetas input y sus atributos

Si alguna vez manejaste las nuevas etiquetas Input y sus nuevos atributos, de seguro te preguntaste como saber si el navegador de un usuario no es compatible con ellas, sabemos que la mayoría de los usuarios no actualizan su navegador por que no son conscientes de ello.

Si quieres conocer Como saber si el navegador soporta los nuevas etiquetas input y sus atributos, sigue leyendo este tip que tenemos para ti.

Ejemplo de una etiqueta input de html5

Para empezar hay que conocer la estructura de una etiqueta input en html5:

<input type="search" placeholder="Escribe tu búsqueda" autofocus />

Esta etiqueta contiene 2 partes nuevas importantes las cuales son las que nos generan el problema de compatibilidad con navegadores antiguos.

1. El tipo de Input (type)
2. Los atributos (placeholder o autofocus)

Validar la compatibilidad del navegador con Javascript

Los 2 puntos anteriores son los que vamos a validar para saber la compatibilidad, es un condición muy sencilla, lo que se va a hacer es crear una etiqueta input en memoria que no podrá ser visible en la pagina web y preguntar si existe el tipo de caja o atributo que solicitamos en ella.

Validar el tipo de input

//Cuando este listo el documento inicia la funcion
$(document).ready(
    function(){
        //creo una etiqueta input en memoria sin presentarla visualmente
        var i = document.createElement("input");
        //Guardo el tipo de etiqueta en el atributo type del objeto "i" que es mi etiqueta en memoria
        i.setAttribute("type", "search");
        //Compruebo que sea diferente a "text", de no ser así, entra la condición
        if (i.type == "text") {
            // No soportado
        }  });

Nota: Para el ejemplo anterior se utilizo jQuery por cuestiones de facilidad de uso.

Es un script muy sencillo que nos valida la existencia de los tipos de input, es aplicable a todos los demas, solo cambiamos “search” por “email, url, etc”.

Validar los atributos en el input

$(document).ready(
	function(){
		/*Valido que el navegador soporte autofocus preguntando si autofocus existe en el input creado en memoria*/
		if(!("autofocus" in document.createElement("input")))
		{
			/*Si no acepta autofocus, hace el autofocus con jquery*/
			$("#nombre").focus();
		}
	}
);

Es parecido al anterior, pero es mas sencillo validar un atributo que un tipo de input, lo mejor de todo, es que si un tipo de input no es soportado, el input por defecto es un tipo “text” y lo demás se simula con javascript.

Es todo por este tip, espero les ayude a validar sus compatibilidades con los usuarios.