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

sortega · #1 (**permalink**) 23/06/2009, 15:38

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.

hades87 · #2 (**permalink**) 23/06/2009, 15:41

podrías hacerlo con el evento onclick de javascript, pero no estoy seguro tampoco

#3 (**permalink**) 23/06/2009, 15:45

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.

KLAYMAN · #4 (**permalink**) 23/06/2009, 15:48

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.

sortega · #5 (**permalink**) 23/06/2009, 15:56

Cita:

Iniciado por alvlin

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...

Cita:

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

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

Vale, gracias.

#6 (**permalink**) 23/06/2009, 15:58

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.

sortega · #7 (**permalink**) 30/06/2009, 07:53

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?

sortega · #8 (**permalink**) 30/06/2009, 08:04

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?

trasgukabi · #9 (**permalink**) 30/06/2009, 09:21

Código Javascript:

Ver originaldocument.getElementById('cajatexto').focus();

sortega · #10 (**permalink**) 30/06/2009, 10:17

Cita:

Iniciado por trasgukabi

Código Javascript:

Ver originaldocument.getElementById('cajatexto').focus();

Gracias, pero no me funciona. "cajatexto" es el valor de "name" en el input, ¿no?

trasgukabi · #11 (**permalink**) 30/06/2009, 12:17

no, es el valor de id. Si lo quieres hacer con name podría ser

Código Javascript:

Ver originaldocument.getElementByName('cajatexto').focus();

o mejor:

Código Javascript:

Ver originaldocument.formulario.cajatexto.focus();

sortega · #12 (**permalink**) 30/06/2009, 12:35

Cita:

Iniciado por trasgukabi

no, es el valor de id. Si lo quieres hacer con name podría ser

Código Javascript:

Ver originaldocument.getElementByName('cajatexto').focus();

o mejor:

Código Javascript:

Ver originaldocument.formulario.cajatexto.focus();

Nop...

sigue sin funcionar...

En ningún navegador funciona...

trasgukabi · #13 (**permalink**) 30/06/2009, 13:50

funciona. mira a ver que tendrás algún error.

sortega · #14 (**permalink**) 30/06/2009, 15:04

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?

trasgukabi · #15 (**permalink**) 30/06/2009, 15:29

Prueba esto, no te des por vencido:

Código HTML:

Ver original<form name="formulario"><input type="text" name="cajatexto"/></form>
<script type="text/javascript">
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.

sortega · #16 (**permalink**) 30/06/2009, 17:09

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...

sortega · #17 (**permalink**) 30/06/2009, 19:35

Cita:

Iniciado por trasgukabi

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?

trasgukabi · #18 (**permalink**) 01/07/2009, 06:06

Cita:

Iniciado por sortega

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?

sortega · #19 (**permalink**) 04/07/2009, 09:46

Cita:

Iniciado por trasgukabi

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...