Cómo modificar TODOS los TAGS "input" de un archivo HTML ???

SLD · #1 (**permalink**) 30/09/2016, 13:19

Hola.

Quiero que al hacer click sobre TODOS los input type="text"
suceda select();

y no tener que escribir en cada uno de ellos:

onblur="select();"

Cómo puedo hacerlo ???

Gracias.

mpozo · #2 (**permalink**) 30/09/2016, 14:39

Es algo sencillo de hacer. Un par de nociones básicas y ya está

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">       
    </head>
    <body>
 
        <form>
            <input type="text" value="foo">
            <input type="text" value="bar">
            <input type="text" value="candy">
        </form>
 
        <script>
            Array.prototype.forEach.call(document.querySelectorAll('input[type="text"]'), function(e, i, a){
                a[i].addEventListener('focus', function() {
                    this.select();
                }, false);
            });
        </script>
 
    </body>
</html>

Alexis88 · #3 (**permalink**) 30/09/2016, 23:53

También puedes delegar el evento mediante la propiedad event.target:

Código Javascript:

Ver originaldocument.addEventListener("click", function(event){
    if (event.target.type == "text"){
        select();
    }
}, false);

La condición y la instrucción también pueden acomodarse así:

Código Javascript:

Ver originalevent.target.type == "text" && select();

Dicha propiedad almacena al elemento afectado directamente por el evento. Cuando se comprueba que el tipo del elemento afectado por el evento es "text", se ejecuta la función "select". Si deseas, también puedes comprobar que se trate de un <input>:

Código Javascript:

Ver originalevent.target.tagName == "INPUT" && event.target.type == "text"

Con lo cual quedaría así:

Código Javascript:

Ver originaldocument.addEventListener("click", function(event){
    (event.target.tagName == "INPUT" && event.target.type == "text") && select();
}, false);

DEMO

Esto te servirá tanto si tienes uno o N elementos como si fueron añadidos de forma síncrona (al cargar el documento) o asíncrona (añadidos dinámicamente).

skywolker · #4 (**permalink**) 04/10/2016, 06:03

Código HTML:

$(function(){
  $("#select_all").click ( function(){
   $("#frm1 input[type='text'].child").attr ( "" , $(this).attr("" ) );
  });
});

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="text" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="select[]" class="child" />
            </td>
        </tr>
    </table>
    </form>