Autor
|
Tema: Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript (Leído 4,206 veces)
|
T0p1t0
Desconectado
Mensajes: 48
|
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: ... 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')" ") 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
Mensajes: 650
System.out.println("this is weird as fuck");
|
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. <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
|
Deberias reestructurar tu codigo. Tal y como nos lo muestras te deberia de funcionar perfectamente. 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 No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta. http://caniuse.com/form-validationSaludos
|
|
|
En línea
|
|
|
|
basickdagger
Desconectado
Mensajes: 650
System.out.println("this is weird as fuck");
|
Le dices eso a una empresa y te manda a la calle enseguida 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
Mensajes: 48
|
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. <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 No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta. http://caniuse.com/form-validationSaludos 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
Mensajes: 48
|
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
|
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í: $(document).ready(function(){ $('#input_1').blur(function(){ if($(this).text() == '') $('#leyenda_error_1').fadeIn(); else $('#leyenda_error_1').fadeOut(); }); });
Acá te dejo un demo que hice: http://jsfiddle.net/dA6Qd/ #action > p > span{ color: red; display: none; } <script type="text/javascript"> $(document).ready(function(){ $('#action > p > input').blur(function(){ if($(this).val() == '') $('#leyenda_' + $(this).attr('name')).fadeIn(); else $('#leyenda_' + $(this).attr('name')).fadeOut(); }); $('#action').submit(function(){ $(this).find('input').blur(); if($(this).find('span:visible').length) return false; }); }); <form action="#" method="post" id="action"> <p><input type="text" name="nombre" /> : Nombre <span id="leyenda_nombre">(El nombre es obligatorio) </span></p> <p><input type="text" name="mail" /> : Mail <span id="leyenda_mail">(El correo es obligatorio) </span></p> <p><input type="submit" value="Enviar datos" /></p>
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
Mensajes: 48
|
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í: $(document).ready(function(){ $('#input_1').blur(function(){ if($(this).text() == '') $('#leyenda_error_1').fadeIn(); else $('#leyenda_error_1').fadeOut(); }); });
Acá te dejo un demo que hice: http://jsfiddle.net/dA6Qd/ #action > p > span{ color: red; display: none; } <script type="text/javascript"> $(document).ready(function(){ $('#action > p > input').blur(function(){ if($(this).val() == '') $('#leyenda_' + $(this).attr('name')).fadeIn(); else $('#leyenda_' + $(this).attr('name')).fadeOut(); }); $('#action').submit(function(){ $(this).find('input').blur(); if($(this).find('span:visible').length) return false; }); }); <form action="#" method="post" id="action"> <p><input type="text" name="nombre" /> : Nombre <span id="leyenda_nombre">(El nombre es obligatorio) </span></p> <p><input type="text" name="mail" /> : Mail <span id="leyenda_mail">(El correo es obligatorio) </span></p> <p><input type="submit" value="Enviar datos" /></p>
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
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
capturar evento "mover archivo"??? o Alerta
Windows
|
rieju
|
3
|
3,284
|
29 Septiembre 2010, 09:16 am
por rieju
|
|
|
AJAX y evento onkeyup (javascript), como detectar ?
PHP
|
Diabliyo
|
1
|
6,043
|
20 Noviembre 2010, 06:52 am
por Nakp
|
|
|
[Problema]Evento sencillo javascript
« 1 2 »
Desarrollo Web
|
KuraraGNU
|
17
|
9,870
|
27 Abril 2011, 10:17 am
por KuraraGNU
|
|
|
[Ayuda][javascript]undefined elemento de un objeto
Desarrollo Web
|
LaThortilla (Effort)
|
1
|
1,805
|
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,900
|
2 Octubre 2017, 22:03 pm
por Drakaris
|
|