Pregunta:

Fecha: 23-01-2015 04:04:43 (En Español)

Efecto máquina de escribir[Resuelta]

Buenas Tardes
Tengo lo siguiente

<script>
    var corre = 0;
    var selec = 0;
    function typing(identificador,atributo,selec){
    var bloque = ["Item 1 ... ","Item 2 ... ","Item 3 ...",    ];
    $(identificador).attr(atributo,"");
    var max = bloque.length;
    var cadena = bloque[selec];

      function myString(selec){
        var cadena = bloque[selec];
        if($(identificador).attr(atributo).length != cadena.length){
          var dato = cadena.substr(corre,1) ;
          var placeholder = $(identificador).attr(atributo) + dato ;
          $(identificador).attr(atributo, placeholder);
          corre++;
          selec++;
        }else{
          corre= 0
          selec++;
          $(identificador).attr(atributo,"");
        }
     };

    setInterval(function(){
    myString(selec);},150);
  }
  typing("#typed","placeholder",selec);

</script>

<input type="text"  id ="#buscador" placeholder="">

Lo que hace el script es dar efecto de maquina de escribir al placeholder de un input pero me veo atorado ya que quiero que me muestre cada uno de los elementos del array y solo me muetra el elemento 0 del array como podria incluir un contador para que me muestre los otros elementos del array,

Escribir "Item 1 ..." Limpiar
Escribir "Item 2 ..." Limpiar
Escribir "Item 3 ..." Limpiar
Iniciar de nuevo

Agradezco sus respuestas Etiquetas: CSS - HTML - Javascript - JQuery - Pregunta Votos: 3 - Respuestas: 4 - Vistas: 16 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

1

Axel Nieves Karma: 125

Fecha: 23-01-2015 19:43:43 Hola, me costó entender a lo que ibas pero creo que ya sé a qué te referís.
Te consulto para confirmar si estoy en lo cierto:
¿Pretendés que se muestren todos los ítems del array "bloque" (uno abajo del otro, tal como lo hace google cuando estás escribiendo)? Votos: 1 - Link respuesta
2

Edwin Marroquin Karma: 731

Fecha: 24-01-2015 01:03:31 Aca esta funcionando, ya se soluciono el inconveniente
.
.
Maquina de escribir XD Votos: 2 - Link respuesta
3

Fernando Mosquera Karma: 10241
Fecha: 24-01-2015 01:53:29
Hola Edwin, estuve un rato para entender lo que estabas necesitando, luego de mirar el código entendí que tenias un problema de orden. Para serte sincero casi abandono la tarea de responderte porque la explicación es pobre (me costo entender la lógica de lo que estabas haciendo), hubiera sido de gran ayuda explicar el código, decir algo como:
El codigo javascript toma el array de palabras de la variable "bloque" y los va mostrando una a una en el "placeholder" del "input". Cada palabra del array es impresa en el "placeholder" como si se tratara de un ingreso por teclado (letra por letra), una vez conpletada la palabra borra el contenido del "placeholder" y continua con la siguiente palabra hasta finaliza el array "bloque".

Por otro lado, para quien lee la pregunta y no es tan entendido, hubiera sido de ayuda mencionar que el código requiere la inclusión del framework JQuery para funcionar.

Y por último, vos comentas que el código funciona pero solo mostrando el primer elemento del array.... pero yo lo he probado y el código tal cual lo colocaste no funciona, le falta ";" en la linea 19, el elemento que pasas como "identificado" en la funciones es "#typed" y luego en el HTML se llama "#buscador", etc etc etc.... tiene varios problemas.

Bueno, aquí la respuesta:

Lo primero que debes hacer es crear tu archivo HTML con el siguiente código:
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Máquina de escribir - placeholder</title>
    </head>
    <body>
        <input type="text" id="buscador" placeholder="">
    </body>
</html>
```
Los segundo es incluir el framework JQuery dentro de la etiqueta <head> del HTML (para el ejemplo realice una inclusión remota, pero para un entorno productivo es aconsejable incluirlo desde el mismo proyecto):
```
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
```
Finalmente incluyes el siguiente código javascript que hace el efecto de maquna de escribir, también dentro de la etiqueta <head> del HTML:
```
<script type="text/javascript">
    var corre = 0;
    var selec = 0;
    var bloque = ["Item 1 ... ", "Item 2 ... ", "Item 3 ..."];
    function myString(identificador, atributo) {
        var cadena = bloque[selec];
        if ($(identificador).attr(atributo).length != cadena.length) {
            var dato = cadena.substr(corre, 1);
            var placeholder = $(identificador).attr(atributo) + dato;
            $(identificador).attr(atributo, placeholder);
            corre++;
        } else {
            corre = 0;
            selec++;
            $(identificador).attr(atributo, "");
        }
        if(bloque.length == selec){
            selec = 0;
        }
    }

    function typing(identificador, atributo) {
        $(identificador).attr(atributo, "");
        setInterval(function() {
            myString(identificador, atributo);
        }, 150);
    }

    $(document).ready(function() {
        typing("#buscador", "placeholder");
    });
</script>
```
Saludos y bueno código!
Votos: 3 - Link respuesta

Fernando Mosquera Karma: 10241

Fecha: 24-01-2015 07:52:58 Edwin, me quede pensando en este script, no tiene mucho sentido que requiera JQuery, ya que no hace más que seleccionar el elemento y obtener / setear el atributo, por lo que rescribí el script en una versión puro Javascript:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function typing(identificador, atributo, arrayDatos) {
                var selec = 0;
                var corre = 0;
                var elemento = document.getElementById(identificador);
                elemento.setAttribute(atributo, "");
                setInterval(function() {
                    var cadena = arrayDatos[selec];
                    if (elemento.getAttribute(atributo).length != cadena.length) {
                        var dato = cadena.substr(corre, 1);
                        var placeholder = elemento.getAttribute(atributo) + dato;
                        elemento.setAttribute(atributo, placeholder);
                        corre++;
                    } else {
                        corre = 0;
                        selec++;
                        elemento.setAttribute(atributo, "");
                    }
                    if (arrayDatos.length == selec) {
                        selec = 0;
                    }
                }, 150);
            }
        </script>
    </head>
    <body>
        <input type="text" id="buscador" placeholder="" />
        <script type="text/javascript">typing('buscador', 'placeholder', new Array("Item 1 ... ", "Item 2 ... ", "Item 3 ..."));</script>
    </body>
</html>

Algo interesante de este cambio es que ahora la función typing es reutilizable (tiene todo su comportamiento encapsulado), solo debes invocarla tantas veces quieras con los elementos que quieras.

Por ejemplo:

typing('email_usuario', 'placeholder', new Array("Escribe", "tu", "email"));

Saludos y buen código! Votos: 2 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Efecto máquina de escribir[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta