Duda en "deselección"

[samy4ever]

Hola!

El tema es que tengo un JS que cuando seleccionas un campo de texto, (input type text) me lo recuadra (con style border). El problema es... Si apreto en cualquier otra parte de la página, eso sigue recuadrado. Cómo puedo hacer para que se quite el borde? Por qué en la propiedad onblur ya tengo algo... No se si se puede añadir algo más.

El código del formulario (bueno, sólo una muestra) y del javascript:

Código:

<table>
		<tr>
			<td><div id="aux">Remitente:</div></td>
			<td><input type = "text" class = "inputss" title = "" name = "FromName" id = "FromName" size = "35" onFocus = "this.style.backgroundColor = '#DDDDDD'" onBlur = "this.style.backgroundColor='white'" onclick="borde('FromName');" /></td>
		</tr>
		<tr>
			<td><div id="aux">Asunto:</div></td>
			<td><input type = "text" class = "inputss" name = "sbj" id = "sbj" size = "35" onFocus = "this.style.backgroundColor = '#DDDDDD'" onBlur = "this.style.backgroundColor='white'" onclick="borde('sbj');" /></td>
		</tr>

Código:

function borde(name){
	document.getElementById("FromName").style.border = "medium groove #808080";
	document.getElementById("sbj").style.border = "medium groove #808080";
	
	document.getElementById(name).style.border = "thin solid red";

}

Gracias! (sí, es una solución cutre)

http://tecnotor.com/contacto.php

[programeitor]

Por qué en la propiedad onblur ya tengo algo... No se si se puede añadir algo más.

se puede, separando las ordenes con punto y coma

onblur="fondo();borde(false);"

[samy4ever]

Iniciado por programeitor

se puede, separando las ordenes con punto y coma

onblur="fondo();borde(false);"

Justo venía a decir que lo había probado como dices y me funcionaba. Gracias!

[jeybi]

Bien, primero limpiemos el codigo, no pongas tantos eventos y acciones directamente en los inputs, deja que una funcion lo haga todo.

Supongo que tienes una clase de tipo:

.inputss{
border:medium groove #808080;
}

Quita todo los eventos que tienes en los inputs, dejalo asi:

onFocus = "borde(this,event)" onBlur="borde(this,event);"

Esto lo que hara sera llamar a la funcion "borde" con 2 parametros, this y event. this se refiere al objeto que realizo la llamada, entonces enves de usar borde('FromName') y borde('sbj') usamos this. Event, se refiere al evento (onfocus o onblur) y tambien se lo pasamos a la funcion para decidir que hacer.

La funcion queda asi:

function borde(input,evento){
var evento = window.event || evento; //Compatibilidad con IE
if(evento.type == 'focus')
input.style.border = "thin solid red";
if(evento.type == 'blur')
input.style.border = "medium groove #808080";
}

Tambien puedes crear otra regla css que sea:

.inputssHover{
border:thin solid red;
}

y hacer la funcion asi:

function borde(input,evento){
var evento = window.event || evento; //Compatibilidad con IE
if(evento.type == 'focus')
input.className = "inputssHover";
if(evento.type == 'blur')
input.className = "inputss";
}

[samy4ever]

vaya, esto no lo sabía...!!!

Ahora ya es tarde pero mañana miraré de corregir y depurar un poco mejor el código! Muchas gracias por la información!

[samy4ever]

Copio cómo me ha quedado, por si alguien alguna vez le sirve.

JS:

function bordef(input, evento){
var evento = window.event || evento; //Compatibilidad con IE

if ((evento.type == 'focus') || (evento.type == 'click'))
input.className = "inputsin";

if (evento.type == 'blur')
input.className = "inputsout";

}


html:

<td><input type = "text" class = "inputsout" title = "Indíquenos su nombre" name = "FromName" id = "FromName" size = "35" onFocus = "bordef(this,event);" onBlur="bordef(this,event);" onclick="bordef(this,event);" /></td>

CSS


.inputsin{
background-color: #DDDDDD;
border: thin solid #F1CA19;
}


.inputsout{
background-color: white;
border: medium groove #808080;

}

[samy4ever]

Hola, necesito ayuda.

Cómo hago para comprobar la longitud del texto??

Yo, siguiendo lo de antes, tengo:

<input type = "text" class = "inputsout" title = "Indíquenos su nombre" name = "FromName" id = "FromName" size = "35" onFocus = "bordef(this,event);" onBlur="bordef(this,event);" onclick="bordef(this,event);" /></td>


Y quiero comprobar algo cuando la longitud del texto introduïdo sea superior a 0. Lo tengo así:

function bordef(input, evento){
var evento = window.event || evento; //Compatibilidad con IE
var aux = document.frm.input.value;

if ((evento.type == 'focus') || (evento.type == 'click'))
input.className = "inputsin";

if (evento.type == 'blur'){
input.className = "inputsout";

if (aux.length > 0)
{
comprovarName(input, evento);
}
}
}

pero me dice que la línea donde hago var aux = document.frm.input.value; no es correcta. Cómo hay que poner esto para luego poder comprobar la longitud del texto introducido? MUCHAS GRACIAS!

SEGUN FIREFOX: document.frm.input is undefined.

[programeitor]

pon solo input.value, el elemento ya viene identificado desde la llamada a la funcion con this.

[jeybi]

Para empezar, quita el onclick en el input, al hacer click le das el foco al mismo tiempo, asi que no es necesario.

document.frm.input falla porque, input no esta definido dentro de frm, solo puedes usar esta sintaxis cuando lo busques por nombre. Debido a que le pasamos una referencia a la funcion usando 'this', podemos usar 'input.value' refiriendonos al valor del input que llamo ala funcion.

Aqui te dejo la misma funcion modificada, estudiala:

Código javascript:

//Obtenemos el input, y el evento
function bordef(input, evento){
//Si el input tiene el foco    
if (evento.type == 'focus'){
    input.className = "inputsin";    //Lo resaltamos con estilos css
} 
//Si al input se le quita el foco
else if (evento.type == 'blur'){        
    input.className = "inputsout";    //Le quitamos el resaltado css
    if (input.value.length > 0){        //Si el numero de caracteres que se introdujo en el input es mayor que 0...
        comprovarName(input.value);   //Llamamos a la funcion comprovarName y le pasamos el valor del input, pasarle el evento no es necesario
    }
    
}
 
}
 
function comprovarName(input){
    alert(input);
    //Aqui lo validas..
}
 

[samy4ever]

Voy a probar. En unos minutos edito este post. Muchas gracias, en especial por explicar el porqué además de corregirlo..!!

[samy4ever]

Hola!

Vaya, me da vergüenza preguntar ya. Ya he arreglado el código cómo me habeis comentado:

Código:

function bordef(input, evento){
	var evento = window.event || evento; //Compatibilidad con IE

	if (evento.type == 'focus')
	input.className = "inputsin"; 
	
	if (evento.type == 'blur'){
		input.className = "inputsout";
		if (input.value.length > 0)
			comprovarName(input);
	}
}

function comprovarName(input)
{
		var alfanum = /^(\w)+$/;
		if (!alfanum.test(input.value))
			input.style.border = "thin solid red";
}

He cambiado el comprovarName(input.value) (he sacado el value) ya que sinó, después en el if de la expresión regular, no sabía como tirar atrás. Es decir, el input.className ahora va, pero sinó en realidad sería input.value.className. Por curiosidad, con el input.value, no podemos llegar al "input", o sí?

Lo que me lleva de cabeza es que ahora me funciona: cuando pones ''' (por ejemplo)en el nombre del remitente (donde lo estoy probando), se recuadra rojo. Vale, hasta aquí perfecto. El problema es que si lo soluciono, no me vuelve a poner el borde que toca, y no se el porqué.

Es curioso. Si después de ponerlo mal selecciono otra vez el campo (debería ponerse la clase inputsin, del primer if de todos, el del focus), me cambia el color de fondo (eso es lo que hace la clase inputsin, cambiar el fondo y el borde) pero NO el borde. Y aunque esté bien, me lo deja en rojo (es decir, que al hacer el inputsout... Me pone el fondo bien de nuevo, pero no el borde).

Alguna idea de por qué puede ser?
Siento ser tan pesado...

Muchas gracias!

[jeybi]

He cambiado el comprovarName(input.value) (he sacado el value) ya que sinó, después en el if de la expresión regular, no sabía como tirar atrás. Es decir, el input.className ahora va, pero sinó en realidad sería input.value.className. Por curiosidad, con el input.value, no podemos llegar al "input", o sí?

Mm no, por que input.value devuelve una string, no hay forma de que tu funcion sepa de donde salio esa string.

Lo que me lleva de cabeza es que ahora me funciona: cuando pones ''' (por ejemplo)en el nombre del remitente (donde lo estoy probando), se recuadra rojo. Vale, hasta aquí perfecto. El problema es que si lo soluciono, no me vuelve a poner el borde que toca, y no se el porqué.

Es curioso. Si después de ponerlo mal selecciono otra vez el campo (debería ponerse la clase inputsin, del primer if de todos, el del focus), me cambia el color de fondo (eso es lo que hace la clase inputsin, cambiar el fondo y el borde) pero NO el borde. Y aunque esté bien, me lo deja en rojo (es decir, que al hacer el inputsout... Me pone el fondo bien de nuevo, pero no el borde).

Alguna idea de por qué puede ser?
Siento ser tan pesado...

Muchas gracias!

Lo que pasa esque cuando pones "input.style.border = "thin solid red";" estas añadiedo una propiedad nueva que tiene mas prioridad sobre la clase en la que esta, es decir imagina que al ejecutar esta linea pasa lo siguiente

<input .... style="border:this solid ridge" ...>

Entonces se sobreescribe el valor de la clase para el borde (lo que pasaria normalmente por que el css en linea tiene mas prioridad que el css que se aplica a una clase)

Una posible solucion:

.inputerror {
border: thin solid red;
}

Y el javascript:

Código javascript:

if (!alfanum.test(input.value))
            input.className = "inputerror";
 

Otra posible solucion seria esta:

Código javascript:

function bordef(input, evento){
       if (evento.type == 'focus')
    input.className = "inputsin"; 
    
    if (evento.type == 'blur'){
        if(!comprovarName(input.value))
            input.className = "inputerror";    
        else
            input.className = "inputsout";
    }
}
 
function comprovarName(texto)
{
        if(texto === "")    //Si lenght == 0, no saldra ningun error
            return true;            
        if (!/^(\w)+$/.test(texto))    //Si hay caracter erroneo, hay error
            return false;        
            
        return true;            //Si llegamos hatsa aqui es que todo esta ok
}
 

PD: Quita lo que decia compatibilidad con ie, no hace falta, puedes probarlo.

[samy4ever]

Vaya, no se me había pasado por la cabeza pensar en posibles prioridades. Muchas gracias! Ahora ya funciona :) Al final he dejado la clase input error y lo que hago es poner una clase CSS u otra según lo que toque :)

Gracias de nuevo!