Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <title>Form 1 -Trim automático</title>
  <meta charset="utf-8">
  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  
</head>
<body>
​
<h2>Form 1 - Trim automático</h2>
​
<form id="formPrueba" name="frmTest" method="post" action="#">
<fieldset>
​
  <label>Nombre <small>(prueba haciendo click en el input y luego en otro lugar del form.)</small></label>
<input title="Ingrese su nombre" id="txtNombre" type="text" name="txtNombre" value="  Alexis   " />
​
<label>Apellidos</label>
<input title="Ingrese sus apellidos" id="txtApellidos" type="text" name="txtApellidos" />
​
<label>Dirección</label>
<input "Ingrese su dirección" type="text" name="txtDireccion" />
​
<label>Teléfono</label>
<input "Ingrese su teléfono" type="text" name="txtTelefono" />
​
  <label>Password <small>(acá no tendrá efecto la función)</small></label>
<input type="password" name="txtClave" />
​
<label>Comentario</label>
<textarea title="Inspírate y pon un comentario" id="txaComentario" name="txaComentario" rows="0" cols="0"></textarea>
​
<input type="button" id="btnEnviarForm" value="Enviar Form" name="btnAceptar" />
​
<input type="button" id="btnMostrarExplicacion" value="Mostrar/Ocultar Detalles" name="btnAceptar" />
​
<div id="contenedorDetalles">
<small><strong>***</strong>
El evento se activará cuando se pierda el foco(función blur) desde cualquier input type text que tenga el formulario con el id "formPrueba" (o cualquier textarea)
  <strong>***</strong></small>
</div>
</fieldset>
  
<div id="creditos">
  Creado por <a href="http://twitter.com/kai_alexis20" target="_blank">@kai_alexis20</a> para <a href="http://xblogsinnombre.blogspot.com/" target="_blank">xblogsinnombre.blogspot.com</a>
  
</div>
</form>
</body>
</html>
 
$(document).ready(function() {
    
  //Trim automático
    $("#formPrueba input[type=text], #formPrueba textarea").blur(function(){
        valueInput = $.trim($(this).val()); 
        $(this).val(valueInput);
    });
    
    
  //Enviar formulario
  $("#btnEnviarForm").click(function(){
        alert("Enviar Form");
    });
    
    //Botón "Mostrar/ Ocultar Detalles"
  $("#btnMostrarExplicacion").click(function(){$("#contenedorDetalles").slideToggle( "slow" );});
  
  
});//FIN $(document).ready(function() {
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kaialexispro
0viewers