Foros del Web » Creando para Internet » Diseño web »

A ver... ¿Quién lo resuelve y en qué lenguaje?

Estas en el tema de A ver... ¿Quién lo resuelve y en qué lenguaje? en el foro de Diseño web en Foros del Web. Hola. ¿Habrá alguien aquí capaz de decirme el código necesario para lo siguiente?: Quiero tener una caja de texto con un texto predeterminado, el cual ...
  #1 (permalink)  
Antiguo 23/06/2009, 16:38
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
A ver... ¿Quién lo resuelve y en qué lenguaje?

Hola. ¿Habrá alguien aquí capaz de decirme el código necesario para lo siguiente?:

Quiero tener una caja de texto con un texto predeterminado, el cual debe desaparecer cuando se empiece a escribir, no cuando se selecciona la caja.

¿Alguna idea?

Gracias.
  #2 (permalink)  
Antiguo 23/06/2009, 16:41
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

podrías hacerlo con el evento onclick de javascript, pero no estoy seguro tampoco
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 23/06/2009, 16:45
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Si es cuando se empieza a escribir, es más apropiado usar el evento onkeypress, con una variable que indique si se tiene que borrar o no. Algo como

Código:
borrar = si;
onkeypress:
si borrar
  caja_de_texto.value = ""
  borrar = no

Saludos.
  #4 (permalink)  
Antiguo 23/06/2009, 16:48
 
Fecha de Ingreso: febrero-2002
Mensajes: 351
Antigüedad: 15 años, 10 meses
Puntos: 19
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Se puede usar JavaScript como bien te ha contestado hades87.

Te dejo algunos enlaces, seguramente alguno te sirva:
http://www.forosdelweb.com/f13/facil...-clear-450449/
http://www.scriptygoddess.com/archiv...thing-entered/

Un saludo.
  #5 (permalink)  
Antiguo 23/06/2009, 16:56
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Cita:
Iniciado por alvlin Ver Mensaje
Si es cuando se empieza a escribir, es más apropiado usar el evento onkeypress, con una variable que indique si se tiene que borrar o no. Algo como

Código:
borrar = si;
onkeypress:
si borrar
  caja_de_texto.value = ""
  borrar = no

Saludos.
Sí, señor. Onkeypress, eso era lo que buscaba. Aunque no entiendo nada del código, porque no sé ni pío de JavaScript , pero...

...aunque no es lo que quiero, supongo que podré reemplazar el onclick por el onkeypress.

Vale, gracias.
  #6 (permalink)  
Antiguo 23/06/2009, 16:58
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

En realidad lo que escribí no es javascript sino una especie de pseudocódigo con el que quería mostrarte la idea.
Si los ejemplos no te bastan, simplemente pregunta de nuevo.


Saludos.
  #7 (permalink)  
Antiguo 30/06/2009, 08:53
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Hola.

Ahora, continuando con el tema... ¿puedo hacer que al poner el cursor sobre esa caja de texto, la barra vertical (el cursor) aparezca al principio del texto predeterminado y no la final?
  #8 (permalink)  
Antiguo 30/06/2009, 09:04
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Y otra cosa... cuando tengo un texto predeterminado en una caja de texto, el cursor ya no aparece predeterminadamente en la primera caja de texto, sino en la primera sin texto predeterminado. ¿Puedo forzarlo para que aparezca en la caja de texto que yo quiera?
  #9 (permalink)  
Antiguo 30/06/2009, 10:21
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Código Javascript:
Ver original
  1. document.getElementById('cajatexto').focus();
  #10 (permalink)  
Antiguo 30/06/2009, 11:17
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Cita:
Iniciado por trasgukabi Ver Mensaje
Código Javascript:
Ver original
  1. document.getElementById('cajatexto').focus();
Gracias, pero no me funciona. "cajatexto" es el valor de "name" en el input, ¿no?
  #11 (permalink)  
Antiguo 30/06/2009, 13:17
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

no, es el valor de id. Si lo quieres hacer con name podría ser
Código Javascript:
Ver original
  1. document.getElementByName('cajatexto').focus();
o mejor:
Código Javascript:
Ver original
  1. document.formulario.cajatexto.focus();

Última edición por trasgukabi; 30/06/2009 a las 13:22
  #12 (permalink)  
Antiguo 30/06/2009, 13:35
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Cita:
Iniciado por trasgukabi Ver Mensaje
no, es el valor de id. Si lo quieres hacer con name podría ser
Código Javascript:
Ver original
  1. document.getElementByName('cajatexto').focus();
o mejor:
Código Javascript:
Ver original
  1. document.formulario.cajatexto.focus();
Nop... sigue sin funcionar...

En ningún navegador funciona...
  #13 (permalink)  
Antiguo 30/06/2009, 14:50
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

funciona. mira a ver que tendrás algún error.
  #14 (permalink)  
Antiguo 30/06/2009, 16:04
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Pos nop... no me funciona... Pero se me ocurre no seguir más con esto y usar otra alternativa:

¿Puedo hacer que al accionar el evento onkeypress sobre una caja de texto desaparezca un texto exterior a esa caja de texto? Osea, lo que se me ocurre es posicionar un texto sobre la caja de texto simulando que ese texto es debido al atributo value del input.

Me imagino que para eso toca cambiar this.value (en onkeypress="if (this.value == 'Usuario') this.value = ''") por algo que haga referencia al texto externo. ¿Cuál sería ese algo? ¿un class? ¿cómo lo pondría en vez de this.value?
  #15 (permalink)  
Antiguo 30/06/2009, 16:29
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Prueba esto, no te des por vencido:

Código HTML:
Ver original
  1. <form name="formulario"><input type="text" name="cajatexto"/></form>
  2. <script type="text/javascript">
  3. document.formulario.cajatexto.focus();

esto funciona. seguro. el focus lo habrás puesto DESPUÉS de haber dibujado el formulario, no?

y para lo otro, puedes referenciar cualquier objeto con document.getElementById. pero hay que ponerles la etiqueta id="nombre", acuérdate.
  #16 (permalink)  
Antiguo 30/06/2009, 18:09
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Ah, no funciona... se me ocurre que quizás haya algún conflicto con otro código. Lo que estoy haciendo es una modificación de una plantilla de correo de google, así que quizás hayan códigos inútiles que no quité, o cualquier cosa que cree conflictos... No sé...

El código completo:

Código:
<html dir="ltr" >
<head>
  <meta name="robots" content="noindex,nofollow" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Sistema de correo web GTS S.A.</title>
  <script type="text/javascript">
  <!--
    // Keep login page from being trapped in iframes.
    if (top.location != self.location) { top.location = self.location.href; }
  -->
  </script>
  <script type="text/javascript">
function OnLoad() {
  gaia_setFocus();
}
</script>
  <style type="text/css">
<!--

body  {
  margin: 5px 15px 0px 15px;
  font-family:arial,sans-serif;
  background-color: #ffffff;
  font-size: 80%;
}

table.header {
  margin-bottom: 0.4em;
}

.smallfont {
  font-size: 80%;
  padding: 10px;
}

#gaia_loginbox {
  margin-top: 0.5em;
}

#gaia_loginform {
  margin: 0;
}

a:link, a:active, a:visited {
  color:#0000CC
}

.form-noindent {
  cell-padding:1px;
  }

li {
  margin-bottom: 1em;
}

h1 {
  font-weight: bold;
  font-size: 130%;
}

.header h1 {
  border-bottom: solid 1px #bbbbbb;
  padding-bottom: 5px;
  
    margin: 0 0 0 15px;
  
}

h2 {
  margin: 0 0 0 0;
  font-weight: bold;
  font-size: 120%;
}

.loginBox {
  padding: 0 0 20px;
  margin: 0px;
  text-align: center;
}

.loginBox h2 {
  margin:0 0 0 0;
  font-weight: bold;
  font-size: 120%;
}

.loginBox table {
  margin: 0px auto;
  text-align: left;
}
.loginBox table td {
  padding-bottom: 0.2em;
}

.loginBox .gaia.le.rem {
  font-size: 80%;
}

#alBoxWrap {
  margin-top: 10px;
}

.alBox {
  padding: 5px 10px;
  margin: 0px;
}

.alBox h4 {
  margin: 0px;
  font-size: 80%;
}

.errormsg {
  color: #cc0000
}
.alert {
  color: #FF0000
}
.sites-teaser {
  margin-top: 2em;
  padding: .5em;
  background-color: #e8e8e8;
  border: 1px solid #eeee00;
}



-->
</style>
</head>
<body  class="hostedlogin"

      onLoad="OnLoad()"

>

<script><!--

function gaia_onLoginSubmit() {

  
  if (window.gaiacb_onLoginSubmit) {
    return gaiacb_onLoginSubmit();
  } else {
    return true;
  }

}


function gaia_setFocus() {
  var f = null;
  if (document.getElementById) { 
    f = document.getElementById("gaia_loginform");
  } else if (window.gaia_loginform) { 
    f = window.gaia_loginform;
  } 
  if (f) {
    if (f.Email && (f.Email.value == null || f.Email.value == "")) {
      f.Email.focus();
    } else if (f.Passwd) {
      f.Passwd.focus();
    } 
  }
}
--></script>
<style type="text/css"><!--
  div.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif; }
  font.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif; }  
--></style>
<style type="text/css"><!--
.gaia.le.lbl { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
.gaia.le.fpwd { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
.gaia.le.chusr { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
.gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
.gaia.le.button { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
.gaia.le.rem { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }

.gaia.captchahtml.desc { font-family: arial, sans-serif; font-size: smaller; } 
.gaia.captchahtml.cmt { font-family: arial, sans-serif; font-size: smaller; font-style: italic; }
  
--></style>
<center><img src="logotipo.png"></center>


                <style type="text/css">
  p {color: #676767;
  font-size: 100%; padding-top: 5px; margin-top:15px; margin-bottom:-5px; text-align: center}
  </style>
              <!--  <p style="text-indent:25%; margin-top:-45px; font-family:Brush Script Std; font-size:150%;"><span style="font-size:140%; font-weight:bolder;">10</span> años</p>  -->
                <p>Por favor ingrese su nombre de usuario y contraseña.</p>
<form name="formulario" id="gaia_loginform"
      
        action="https://www.google.com/a/solucionesinformaticas.co.cc/LoginAction2?service=mail" method="post"
      
      onsubmit=
                 "return(gaia_onLoginSubmit());"
                >
                

<div id="gaia_loginbox">
<table  class="form-noindent" cellspacing="3" cellpadding="5" width="100%" border="0">
  <tr>
  <td valign="top" style="text-align:center" nowrap="nowrap"
        >
  <input type="hidden" name="ltmpl"
             value="default">
  <input type="hidden" name="ltmplcache"
             value="2">
  <div class="loginBox">
  <table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0">
  <tr>

</tr>
  <script type="text/javascript"><!--
    function onPreCreateAccount() {
    
      return true;
    
    }

    function onPreLogin() {
    
      
      if (window["onlogin"] != null) {
        return onlogin();
      } else {
        return true;
      }
    
    }
  --></script>
<tr>
  <td colspan="2" align="center">
  </td>
</tr>
<tr>
  <td nowrap="nowrap">
  <div align="right">
  <span class="gaia le lbl" style="color: #676767;">
  Usuario:
  </span>
  </div>
  </td>
  <td>
  	
  <input type="hidden" name="continue" id="continue"
           value="https://mail.google.com/a/solucionesinformaticas.co.cc/" />
  <input type="hidden" name="service" id="service"
           value="mail" />
  <input type="hidden" name="rm" id="rm"
           value="false" />
  <input type="hidden" name="ltmpl" id="ltmpl"
           value="default" />
  <input type="hidden" name="ltmpl" id="ltmpl"
           value="default" />
  <input type="hidden" name="ss" id="ss"
           value="1" />
  <input type="hidden"
             name="GALX"
             value="m4mtzPDrmrY" />
  <input  type="text" name="Email"  id="Email"
  size="18" value="Usuario"
  onkeypress="if (this.value == 'Usuario') this.value = ''"
  onblur="if (this.value == '') this.value = 'Usuario'"
    class='gaia le val'
  
  />
  
  
  </td>
</tr>
<tr>
  <td></td>
  <td align="right" style="color: #444444; font-size: 75%; overflow: hidden;"
    dir="ltr">
  <[email protected]>
  </td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td align="left">
  </td>
</tr>
<tr>
  <td align="right">
  <span class="gaia le lbl" style="color: #676767;">
  Contrase&ntilde;a:
  </span>
  </td>
  <td>
  <input  type="password"
   name="Passwd" id="Passwd"
  size="18"
  
    class="gaia le val" 
  
  />
  </td>
</tr>
<tr>
  <td>
  </td>
  <td align="left">
  </td>
</tr>
  <tr>
  <td align="right" valign="top">
  <input  type="checkbox" name="PersistentCookie" id="PersistentCookie"
    value="yes"
  
    
  
  />
  <input type="hidden" name='rmShown' value="1" />
  </td>
  <td>
  <label for="PersistentCookie" class="gaia le rem" style="color: #676767;">
  Recu&eacute;rdame
  </label>
    <input type="submit" class="gaia le button" name="signIn" style="font-size: 76%;"
           value="Acceder"
                  />
  </td>
</tr>
<tr>
  <td>
  </td>
  <td align="left">

  </td>
</tr>
<!--<tr id="ga-fprow">
  <td colspan="2" height="33.0" class="gaia le fpwd"
    align="center" valign="bottom">
  <a href="https://www.google.com/a/solucionesinformaticas.co.cc/DomainContact?service=mail"
       target=_top>
  Olvide mi password.
  </a>
  </td>
</tr>-->
  </table>
  </div>
  </td>
  </tr>
</table>
</div>
<input type="hidden" name="asts"
       id="asts"
       value="">
</form>
<form id="gaia_universallogin"
      action="https://www.google.com/a/solucionesinformaticas.co.cc/LoginAction2?service=mail" method="post"
      onsubmit="return(gaia_onLoginSubmit());">
  <input type="hidden" name="continue" id="continue"
           value="https://mail.google.com/a/solucionesinformaticas.co.cc/" />
  <input type="hidden" name="service" id="service"
           value="mail" />
  <input type="hidden" name="rm" id="rm"
           value="false" />
  <input type="hidden" name="ltmpl" id="ltmpl"
           value="default" />
  <input type="hidden" name="ltmpl" id="ltmpl"
           value="default" />
  <input type="hidden" name="ss" id="ss"
           value="1" />
  <input type="hidden" name="ltmpl" id="ltmpl"
           value="default" />
  <input type="hidden" name="ltmplcache" id="ltmplcache"
           value="2" />
</form>


<script type="text/javascript">
document.formulario.Email.focus();
</script>
  </td>
  
  </tr>
</table>
<style type="text/css">
a:link, a:visited {text-decoration: none; color: #676767}
	a:hover {color: white; background:#676767}
</style>
  <style type="text/css">
  .f {border-top: solid 1px #bbbbbb; color: #676767;
  font-size: 90%; padding-top: 5px; margin-top:0px}
  .f span {position: relative; bottom: 7px}
  </style>
  <style type="text/css">
  .g {color: #676767;
  font-size: 90%; padding-top: 5px; margin-top:0px;}
  .g span {position: relative; bottom: 0px}
  </style>
  <!-- footer -->
    <table border="0" cellpadding="0" cellspacing="0" width="60%" align="center" class="g">

    <tr>
            <td align="right"><a href="http://www.gtscolombia.com/">P&aacute;gina principal</a></td>
        </tr>
  </table>
  
          
</div>
</body>
</html>
Y respecto a lo otro... más tarde lo reviso, ahora voy de salida...
  #17 (permalink)  
Antiguo 30/06/2009, 20:35
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Cita:
Iniciado por trasgukabi Ver Mensaje
y para lo otro, puedes referenciar cualquier objeto con document.getElementById. pero hay que ponerles la etiqueta id="nombre", acuérdate.
Lo siento, pero tampoco me funciona... Es que igual, aunque no sé de javascript, no le veo mucho sentido al uso de la opción que me das... ¿cómo debería usarlo?

Lo que se me ocurre es, quizás, usar el parámetro hidden. Algo que diga que,

si tengo tal texto,
y si tengo tal input,
al activar un onkeypress en dicho input,
el texto toma el atributo hidden.


¿Podría hacer algo así (imagino que sí)? ¿Cómo?
  #18 (permalink)  
Antiguo 01/07/2009, 07:06
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Cita:
Iniciado por sortega Ver Mensaje
Lo siento, pero tampoco me funciona... Es que igual, aunque no sé de javascript, no le veo mucho sentido al uso de la opción que me das... ¿cómo debería usarlo?

Lo que se me ocurre es, quizás, usar el parámetro hidden. Algo que diga que,

si tengo tal texto,
y si tengo tal input,
al activar un onkeypress en dicho input,
el texto toma el atributo hidden.


¿Podría hacer algo así (imagino que sí)? ¿Cómo?
que no le ves sentido?
  #19 (permalink)  
Antiguo 04/07/2009, 10:46
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: A ver... ¿Quién lo resuelve y en qué lenguaje?

Cita:
Iniciado por trasgukabi Ver Mensaje
que no le ves sentido?
Pues, a menos que esté entendiendo mal, supongo que lo que propones sería algo así:

Código:
<p id=hola>Hola, mundo.</p>

  <input  type="text" name="Usuario"  id="Usuario"
  onkeypress="if (document.getElementById('hola') == 'Hola, mundo.') document.getElementById('hola') = ''"
  onblur="if (document.getElementById('hola') == '') document.getElementById('hola') = 'Hola, mundo.'"
  />
Mmmmm... y, bueno, ya no recuerdo por qué no le había visto sentido, ahora sí le veo sentido, pero igual no funciona...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:20.