elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript  (Leído 4,213 veces)
T0p1t0

Desconectado Desconectado

Mensajes: 48


Ver Perfil
Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« en: 5 Junio 2013, 11:32 am »

Buenas, a ver si consigo explicar de manera que se entienda bien lo que quiero:

Estoy dandoles funcionalidad a unos formularios. Lo he configurado en javascript, de manera que si se deja alguno de los parametros del formulario en blanco, me saque una alerta diciendo que complete dicho parametro.

Por otra parte, también en javascript, he creado una funcion de resaltar en el caso de que haga focus con el raton en un determinado campo del formulario. En ese caso, se queda dicho elemento marcado con un borde y un cambio del color de su respectivo textarea.

Pues bien, lo que me gustaría es que además de lanzarme la alerta de que tengo que rellenar el campo vacío del formulario, automaticamente se me quedase marcado dicho campo (como si lo hubiera pulsado con el ratón).

He buscado información, y lo que he hecho es esto:

Código:
... if (nombre.length==0) {
alert("Inserte su nombre completo");
document.getElementById("nombre").focus() ...

Así mismo, ya tenía establecida de antes la función "resaltar" que se activa cuando ese elemento está onfocus (determinado en el propio html que se active la funcion resaltar cuando el elemento en cuestion esté onfocus "onfocus="resaltar('nombre')" ")

Código:
function resaltar(mi_id) {
document.getElementById(mi_id).style.border="2px solid #e6b700";
document.getElementById(mi_id).style.backgroundColor="#F5F5F5";
}


El problema, es que de la manera en la que lo he hecho funciona quedando resaltado un instante, para apagarse inmediatamente, y lo que yo quiero es que se quede permanetemente hasta que marque otro elemento.

Espero que se haya entendido bien mi problema...

Un saludo


En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #1 en: 5 Junio 2013, 16:22 pm »

hola, ps yo no complicaría tanto solamente coloca requerid al final de los input q no quieres q estén vacíos y listo adiós javascript.

Código:
<input type="text" id="mi input" name="name" required>

no recuerdo si funciona en IE, pero bueno, si quieren ver algo bien q utilicen un navegador bueno xD


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #2 en: 5 Junio 2013, 17:01 pm »

Deberias reestructurar tu codigo. Tal y como nos lo muestras te deberia de funcionar perfectamente.

Citar
no recuerdo si funciona en IE, pero bueno, si quieren ver algo bien q utilicen un navegador bueno xD

Le dices eso a una empresa y te manda a la calle enseguida :P No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.
http://caniuse.com/form-validation

Saludos
En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #3 en: 5 Junio 2013, 17:35 pm »

Le dices eso a una empresa y te manda a la calle enseguida :P No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.

haha xD ya lo se era broma, yo lo suelo utilizar y para navegadores como IE  le mostraba otro codigo, en cuanto a safari esa no me la sabia, bueno gracias, saludos
En línea

T0p1t0

Desconectado Desconectado

Mensajes: 48


Ver Perfil
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #4 en: 5 Junio 2013, 17:41 pm »

hola, ps yo no complicaría tanto solamente coloca requerid al final de los input q no quieres q estén vacíos y listo adiós javascript.

Código:
<input type="text" id="mi input" name="name" required>

no recuerdo si funciona en IE, pero bueno, si quieren ver algo bien q utilicen un navegador bueno xD

A ver, la cosa es que quiero aprender a hacerlo porque me parece una funcionalidad útil para una web, y si en un futuro, cuando me dedique a esto, si un cliente me pide algo parecido, yo poderselo ofrecer. Es un ejercicio que estoy haxciendo por mi cuenta para practicar, pero como he dicho, esa funcionalidad me parece útil y de ahí mi interés.

No te lo tomes a mal, pero a  mi gustan las cosas bien hechas, aunque me impliquen dolores de cabeza hasta que encuentro la forma de hacerlo

Deberias reestructurar tu codigo. Tal y como nos lo muestras te deberia de funcionar perfectamente.

Le dices eso a una empresa y te manda a la calle enseguida :P No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.
http://caniuse.com/form-validation

Saludos

No sé a que te refieres exactamente con restructurar mi código. A parte, hay más funciones que hacen bien su cometido...Si es necesario subo el código entero a mega para que le echéis un vistazo...
En línea

T0p1t0

Desconectado Desconectado

Mensajes: 48


Ver Perfil
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #5 en: 5 Junio 2013, 17:42 pm »

A ver, la cosa es que quiero aprender a hacerlo porque me parece una funcionalidad útil para una web, y si en un futuro, cuando me dedique a esto, si un cliente me pide algo parecido, yo poderselo ofrecer. Es un ejercicio que estoy haxciendo por mi cuenta para practicar, pero como he dicho, esa funcionalidad me parece útil y de ahí mi interés.

No te lo tomes a mal, pero a  mi gustan las cosas bien hechas, aunque me impliquen dolores de cabeza hasta que encuentro la forma de hacerlo.

Edito: acabo de ver que decías que era una broma ;)

No sé a que te refieres exactamente con restructurar mi código. A parte, hay más funciones que hacen bien su cometido...Si es necesario subo el código entero a mega para que le echéis un vistazo...
En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.605


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #6 en: 6 Junio 2013, 15:36 pm »

Eso de utilizar alertas en campos vacios es de cavernicolas, lo que debes hacer es crear un evento onblur del input donde si el campo está vacio entonces mostrar un pequeño texto de color rojo al costado derecho diciendo que el campo es requerido, luego desde el código dinámico (cgi, php, asp) debes volver a verificar que estos campos no vengan vacios porque recuerda que hay un gran porcentaje de usuarios en todo el mundo que navegan sin javascriopt y puedes abrir una brecha de seguridad importante.

En jQuery sería algo así:
Código
  1. $(document).ready(function(){
  2. $('#input_1').blur(function(){
  3. if($(this).text() == '')
  4. $('#leyenda_error_1').fadeIn();
  5. else
  6. $('#leyenda_error_1').fadeOut();
  7. });
  8. });

Acá te dejo un demo que hice:
http://jsfiddle.net/dA6Qd/

Código
  1. <style type="text/css">
  2. #action > p > span{ color: red; display: none; }
  3.  
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $('#action > p > input').blur(function(){
  7. if($(this).val() == '')
  8. $('#leyenda_' + $(this).attr('name')).fadeIn();
  9. else
  10. $('#leyenda_' + $(this).attr('name')).fadeOut();
  11. });
  12. $('#action').submit(function(){
  13. $(this).find('input').blur();
  14. if($(this).find('span:visible').length)
  15. return false;
  16. });
  17. });
  18.  
  19. <form action="#" method="post" id="action">
  20. <p><input type="text" name="nombre" /> : Nombre <span id="leyenda_nombre">(El nombre es obligatorio)</span></p>
  21. <p><input type="text" name="mail" /> : Mail <span id="leyenda_mail">(El correo es obligatorio)</span></p>
  22. <p><input type="submit" value="Enviar datos" /></p>
  23. </form>

Lo genial es que es compatible con todos los navegadores existentes.
« Última modificación: 6 Junio 2013, 16:07 pm por WHK » En línea

T0p1t0

Desconectado Desconectado

Mensajes: 48


Ver Perfil
Re: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript
« Respuesta #7 en: 7 Junio 2013, 13:25 pm »

Eso de utilizar alertas en campos vacios es de cavernicolas, lo que debes hacer es crear un evento onblur del input donde si el campo está vacio entonces mostrar un pequeño texto de color rojo al costado derecho diciendo que el campo es requerido, luego desde el código dinámico (cgi, php, asp) debes volver a verificar que estos campos no vengan vacios porque recuerda que hay un gran porcentaje de usuarios en todo el mundo que navegan sin javascriopt y puedes abrir una brecha de seguridad importante.

En jQuery sería algo así:
Código
  1. $(document).ready(function(){
  2. $('#input_1').blur(function(){
  3. if($(this).text() == '')
  4. $('#leyenda_error_1').fadeIn();
  5. else
  6. $('#leyenda_error_1').fadeOut();
  7. });
  8. });

Acá te dejo un demo que hice:
http://jsfiddle.net/dA6Qd/

Código
  1. <style type="text/css">
  2. #action > p > span{ color: red; display: none; }
  3.  
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $('#action > p > input').blur(function(){
  7. if($(this).val() == '')
  8. $('#leyenda_' + $(this).attr('name')).fadeIn();
  9. else
  10. $('#leyenda_' + $(this).attr('name')).fadeOut();
  11. });
  12. $('#action').submit(function(){
  13. $(this).find('input').blur();
  14. if($(this).find('span:visible').length)
  15. return false;
  16. });
  17. });
  18.  
  19. <form action="#" method="post" id="action">
  20. <p><input type="text" name="nombre" /> : Nombre <span id="leyenda_nombre">(El nombre es obligatorio)</span></p>
  21. <p><input type="text" name="mail" /> : Mail <span id="leyenda_mail">(El correo es obligatorio)</span></p>
  22. <p><input type="submit" value="Enviar datos" /></p>
  23. </form>

Lo genial es que es compatible con todos los navegadores existentes.

Pues muchas gracias WHK. Esta tarde me pondré manos a la obra a hacer pruebas con tu ejemplo. Se agradece de verdad tu aclaración de los usuarios que llevan noscript :)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
capturar evento "mover archivo"??? o Alerta
Windows
rieju 3 3,295 Último mensaje 29 Septiembre 2010, 09:16 am
por rieju
AJAX y evento onkeyup (javascript), como detectar ?
PHP
Diabliyo 1 6,046 Último mensaje 20 Noviembre 2010, 06:52 am
por Nakp
[Problema]Evento sencillo javascript « 1 2 »
Desarrollo Web
KuraraGNU 17 9,893 Último mensaje 27 Abril 2011, 10:17 am
por KuraraGNU
[Ayuda][javascript]undefined elemento de un objeto
Desarrollo Web
LaThortilla (Effort) 1 1,808 Último mensaje 30 Agosto 2016, 20:48 pm
por LaThortilla (Effort)
Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
Desarrollo Web
Drakaris 2 2,916 Último mensaje 2 Octubre 2017, 22:03 pm
por Drakaris
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines