[SOLUCIONADO] ¿Cómo pasar este efecto de un DIV a un INPUT?

dfmex · #1 (**permalink**) 05/04/2015, 12:41

Hola amigos!

Quisiera saber si alguien que sepa JavaScript podría ayudarme a pasar un efecto que funciona en un <div>...

Este es un efecto de texto que simula que está escribiendo, está en javascrip y en jquery, actualmente lo hace en un DIV pero me gustaría que lo haga en un INPUT TEXT y que al escribir me mande una alerta de javascript que diga "Ya terminé" ( alert('ya terminé'); )...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script src="js/jquery.js" type="text/javascript"></script>
<script language="JavaScript">


 $(document).ready(function (){
  textEscribe("ESTE ES UN MENSAJE QUE SIMULA ESCRIBIR", '#contenedor', 50);
 });
 
 function textLista()
 {
   max = textLista.arguments.length;
   for (i = 0; i < max; i++)
  this[i] = textLista.arguments[i];
 }
 
 function textEscribe(txt, selector, time)
 {
  $(selector).empty();
  var x = 0; pos = 0;
  var tl = new textLista
    ( 
     txt
    );
  var l = tl[0].length;
  textInterval(selector, tl, l, x, pos, time);
 }
 
 function textInterval(selector, tl, l, x, pos, time)
  { 
   var intervalo =
   setInterval(function() {
   $(selector).html(tl[x].substring(0,pos));
   if(pos++ == l) 
    clearInterval(intervalo);
   }, time);
  }
  
</script>


<title>Untitled Document</title>
</head>


<body>
<div id="contenedor" /></div>
<input type="text" name="EscribirAqui" id="EscribirAqui" />
</body>
</html>

Ojalá alguien pudiera ayudarme por favor

Gracias de antemano

Alexis88 · #2 (**permalink**) 05/04/2015, 14:22

En lugar de pasarle a la función el id del <div>, pásale el del <input> y en lugar de usar el método .html() para asignarle el valor, usa el método .val().

Saludos

fede5426 · #3 (**permalink**) 05/04/2015, 18:10

Tal y como dijo Alexis88. Te dejo el código modificado:

Código Javascript:

Ver original$(document).ready(function (){
  textEscribe("ESTE ES UN MENSAJE QUE SIMULA ESCRIBIR", '#EscribirAqui', 50);  /*cambias el id del div por el id del input*/
 });
 
 function textLista()
 {
   max = textLista.arguments.length;
   for (i = 0; i < max; i++)
  this[i] = textLista.arguments[i];
 }
 
 function textEscribe(txt, selector, time)
 {
  $(selector).empty();
  var x = 0; pos = 0;
  var tl = new textLista
    ( 
     txt
    );
  var l = tl[0].length;
  textInterval(selector, tl, l, x, pos, time);
 }
 
 function textInterval(selector, tl, l, x, pos, time)
  { 
   var intervalo =
   setInterval(function() {
   $(selector).val(tl[x].substring(0,pos)); /*cambias html por val*/
   if(pos++ == l) 
    clearInterval(intervalo);
   }, time);
  }

Saludos

dfmex · #4 (**permalink**) 05/04/2015, 20:54

Gracias por sus respuesta, me han ayudado mucho, poco a poco estoy aprendiendo del formato cuando son cosas en JQuery.