evento onfocus

fmiguelcapel · #1 (**permalink**) 07/01/2013, 14:22

necesito crear una condicion para que al hacer situarme en un elemento del formulario, este se quede en blanco respecto al escrito que tiene por defecto( 'value' ),y cuando quiera regresar a ese campo para modificarlo, no se borre lo escrito anteriormente.
a ver si me pueden ayudar ya que por mas vueltas que le doy no lo consigo...
el codigo que creé es este pero me falta la condicion para cuando pretendo modificar el elemento no se borre su contenido:

function borrar_elemento(elemento){

document.getElementById(elemento).value = "";
document.getElementById(elemento).style.background Color= "#F6FFA9";
document.getElementById(elemento).style.border= "2px solid #e6b700";

emprear · #2 (**permalink**) 07/01/2013, 16:20

Cita:

Iniciado por fmiguelcapel

necesito crear una condicion para que al hacer situarme en un elemento del formulario, este se quede en blanco respecto al escrito que tiene por defecto( 'value' ),y cuando quiera regresar a ese campo para modificarlo, no se borre lo escrito anteriormente.
a ver si me pueden ayudar ya que por mas vueltas que le doy no lo consigo...
el codigo que creé es este pero me falta la condicion para cuando pretendo modificar el elemento no se borre su contenido:

function borrar_elemento(elemento){

document.getElementById(elemento).value = "";
document.getElementById(elemento).style.background Color= "#F6FFA9";
document.getElementById(elemento).style.border= "2px solid #e6b700";

Si el value por defecto es "hola", entonces pone como condición que solo los ponga en blanco si el value es "hola"

if(document.getElementById(elemento).value == "hola"){
document.getElementById(elemento).value = "";
}
Saludos

fmiguelcapel · #3 (**permalink**) 07/01/2013, 16:33

lo se, pero el problema de esa condicion, es que como en el formulario como se puede ver hay varios elementos con diferentes value, no se como indicarlo...
quiero decir que al poner elemento como parametro de la funcion, es porque tengo barios value con sus correspondientes palabras y entonces se deberia crear esa condicion para todos esos value...

emprear · #4 (**permalink**) 07/01/2013, 16:40

Cita:

Iniciado por fmiguelcapel

lo se, pero el problema de esa condicion, es que como en el formulario como se puede ver hay varios elementos con diferentes vallue, no se como indicarlo...

Yo no veo varios elementos, veo tan solo uan función que recibe un parámetro.
ademas solo bastaría llamar la función con un evento en el campo sobre el que quieras que actue

Código HTML:

Ver original<intpu type="text" value="hola" id="xxx" onfocus="tuFuncion(this.id);" />

SAludos

fmiguelcapel · #5 (**permalink**) 07/01/2013, 17:45

ya llamo a la funcion desde el elemento refiriendome a esa funcion; pero como dije en sea funcion externa se puede crear la condicion que me dijiste; y funciona para ese elemento; pero como hacer que funcione esa misma funcion para los otros elementos del mismo formulario con esa condicion, si el valor del elemento value cambia para los otros elementos?
en cualquier cosa me quedaria crear tantas condiciones como elementos en que el valor value cambie...saludos...

emprear · #6 (**permalink**) 07/01/2013, 18:16

Entonces pasás los 2 valores como parámetro, el id del elemento y su valor

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function fnc(elemento,elValor){
var valor = document.getElementById(elemento);
if(valor.value == elValor){
valor.value = "";
}
}
 
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" value="hola" id="nombre" onfocus="fnc(this.id,'hola')" /><br />
<input type="text" value="hola2" id="nombre2" onfocus="fnc(this.id,'hola2')" /><br />
</form>
</body>
</html>

Me suena a que querés hacer una suerte de "placeholder" pero no estoy muy seguro
Saludos

Panino5001 · #7 (**permalink**) 07/01/2013, 20:19

En lugar de elValor es mejor usar

Código:

document.getElementById(elemento).defaultValue;

emprear · #8 (**permalink**) 07/01/2013, 20:32

Cita:

Iniciado por Panino5001

En lugar de elValor es mejor usar

Código:

document.getElementById(elemento).defaultValue;

Muy buena como siempre @Panino5001, nunca la había usado

Entonces nos quedaría

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function fnc(elemento){
var valor = document.getElementById(elemento);
if(valor.value == valor.defaultValue){
valor.value = "";
}
}
 
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" value="hola" id="nombre" onfocus="fnc(this.id)" /><br />
<input type="text" value="hola2" id="nombre2" onfocus="fnc(this.id)" /><br />
</form>
</body>
</html>

Saludos

fmiguelcapel · #9 (**permalink**) 08/01/2013, 11:30

Muchas gracias a todos por vuestra colaboración, y he de decir que funciona perfectamente; aunque tambien podría simplificarla sin tener que utilizar una condicion ya que la propiedad 'defaultvalue' ( que desconocía ) es de gran utilidad:

document.getElementById(elemento).defaultValue = "";

Como dije, muchas gracias y hasta la próxima...