El siguiente código desactiva todos los checkbox existentes en una página web.
Si deseas hacer lo contrario, solo cambia el valor false a true y listo.
//seleccionamos todos los input
var inputs = document.getElementsByTagName("input");
//recorremos los inputs
for(var i = 0; i < inputs.length; i++) {
//si es checkbox aplicamos el valor
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
La función serialize de jquery nos sirve para serializar los elementos que se encuentra dentro de un formulario en específico, es decir, al aplicar la función obtenemos los elementos preparados para una petición al backend (campo1=1&campo2=2…).
Para que podamos hacer esta funcionalidad pero en elementos que no están dentro de un form sino dentro de un div por ejemplo lo podemos hacer de la siguiente manera:
<div id="UnDiv">
<input type="text" name="campo1">
<select name="campo2">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" name="campo3">
</div>
//selector de jquery :input
var parametros = $('#UnDiv :input').serialize();
Recuerda poner el atributo name en los elementos a serializar y también otro tip, el selector “:input” selecciona todos los elementos de formulario, tanto input, select, textarea etc.
Para que el contenido que tiene un elemento sea copiado automáticamente al portapapeles del usuario, anexo la siguiente función en javascript ayudándome de los selectores de jquery.
Cada paso esta comentado, para en caso de utilizarla con un distinto elemento puedas modificarla sin dificultad.
En el ejemplo realizo la copia del contenido html que existe dentro de un elemento td de una tabla.
HTML
<table>
<tr>
<td onclick="Copiar(this)">Hola soy un texto que se copia al darle clic</td>
<td onclick="Copiar(this)">Hola yo soy otro texto que se copia al darle clic</td>
</tr>
</table>
JAVASCRIPT
function Copiar(element) {
//creamos un input que nos ayudara a guardar el texto temporalmente
var $temp = $("<input>");
//lo agregamos a nuestro body
$("body").append($temp);
//agregamos en el atributo value del input el contenido html encontrado
//en el td que se dio click
//y seleccionamos el input temporal
$temp.val($(element).html()).select();
//ejecutamos la funcion de copiado
document.execCommand("copy");
//eliminamos el input temporal
$temp.remove();
}
Para lograrlo vamos a utilizar el disparador keyup y jquery y haremos un selector por clase, en este caso la llamaremos positive, así podemos reutilizarlo en las cajas de texto que deseemos, código a continuación:
Código HTML
<input value="" class="positive" min="1" type="number" step="1" name="cajita" id="cajita" /> <input value="" class="positive" min="1" type="number" step="1" name="cajita2" id="cajita2" />
Código Javascript
$(".positive").keyup(function () {
var valor = $(this).prop("value");
//evaluamos si es negativo, y ponemos 1 por defecto
if (valor < 0)
$(this).prop("value", "1");
})
Para hacer que nuestros inputs no carguen datos guardados en el navegador, ya sea usuario y contraseña cargados en el formulario de acceso y se carguen en el formulario de modificar datos de usuario por ejemplo, tenemos que utilizar el atributo: autocomplete con el valor off.
<input type="text" name="usuario" autocomplete="off">
Esto evitara que se cargue el valor guardado de usuario en una caja de texto con el mismo name.
Algunas veces necesitamos que una caja de texto solo acepte números (puedes ver mi otra entrada: cómo hacer que una caja de texto solo permita letras y espacios con jquery), para hacerlo podemos hacer uso de la siguiente función:
$(".number").keydown(function (e) {
// Permite: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Permite: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Permite: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// solo permitir lo que no este dentro de estas condiciones es un return false
return;
}
// Aseguramos que son numeros
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
Ayudándome de los selectores de jquery solo basta con poner la clase “number” a mis cajas de texto y con eso ya el usuario no podrá introducir caracteres que no sean números.
<input type="text" class="number">
En este capítulo y el siguiente, complementaremos los dos capítulos anteriores (7. El objeto document y 8.- La interfaz Node), en los cuales analizamos la teoría de dos de las herramientas más utilizadas de javascript que juntas podemos realizar modificaciones dinámicas de nuestra página web.
Para ello vamos realizar una transformación de un elemento input(<input>) por algunos de sus tipos, y esto lo haremos de una manera fácil, y comenzamos por tener el contenido HTML siguiente:
<div> <select id="comboMagico" onchange="CambiaComponente()"> <option selected="selected" value="TextBox">TextBox</option> <option value="Button">Button</option> <option value="CheckBox">CheckBox</option> </select> </div> <div> <input type="text" value="Input Magico" id="inputMagico" /> </div>
Tenemos un elemento combobox (<select>) y un elemento input (<input>) los cuales tienen su id para poderlos identificar; el elemento combobox contiene una función que se activa en el evento onchange (como vimos en el capitulo de eventos de este curso) y que se activa cada que cambiamos la opción seleccionada de nuestro combobox.
Lo que haremos a continuación es que al ser cambiada la opción del combobox, nuestro input de la parte de abajo, se transforme en el tipo seleccionado, es decir si seleccionamos la opción Button, nuestro input se transforme en un botón.
Para ello haremos la función que invoca el combobox de nombre CambiaComponente() de la siguiente manera:
function CambiaComponente(){
//utilizando el metodo getElementById de document obtenemos el nodo del combobox
//y con el atributo value obtenemos la opcion seleccionada
opcion=document.getElementById("comboMagico").value
//Hacemos un switch case, dependiendo la opcion seleccionada en el combobox realizamos una transformación.
switch (opcion){
case "TextBox":
document.getElementById("inputMagico").type="text"
break;
case "Button":
document.getElementById("inputMagico").type="button"
break;
case "CheckBox":
document.getElementById("inputMagico").type="checkbox"
break;
}
}
Lo que hacemos con la función es obtener el valor seleccionado por medio del objeto document, la función getElementById y el atributo value, y después analizarla con un switch case para así transformar nuestro input en el valor elegido.
Para ver un ejemplo del código en ejecucion, ahora no pondre un den clic aqui, pueden observarlo abajo y ustedes hacer la prueba moviendo el combobox:
En este capitulo vimos la facilidad de modificar elementos HTML, y transformarlos, esto nos abre miles de posibilidades para realizar acciones dinámicas a nuestras páginas web.
Ir Capítulo Siguiente (10.- Creación de elementos HTML con Javascript)