1

espero me puedan ayudar con este problema soy nuevo y me gustaria hacer esto... Tengo un input en el cual ingreso información la valoro con algunas condiciones y dependiendo si es cierta que aparezca una ventana modal de bootstrap. Pero la quiero activar al momento de dar enter al input sin ningun boton... ¿Cómo puedo hacer esto?

Gracias por sus respuestas.

<input type="text" id="info" name="info">

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
1
  • Lo que tienes que hacer es un evento que cuando detecte la tecla enter, haga lo que tu quieras. Eso es lo que hay en las respuestas de abajo. el 27 jul. 2018 a las 7:44

2 respuestas 2

3

Puedes hacerlo asi:

$("#info").on('keyup', function(e) {
  var keycode = (e.keyCode ? e.keyCode : e.which);
  if (keycode == '13') {
    $('.modal').modal('show');
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type="text" id="info" name="info">

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1
  • me funciona muy bien muchas gracias
    – francisco
    el 17 jul. 2018 a las 21:34
0

Podrías hacer usando JQuery

$('#info').bind("enterEventInfo",function(e){
     $('#mymodal_').modal('toggle');
});
$('#info').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterEventInfo");
    }
});

<div id="mymodal_" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
1
  • no me funciona al momento de dar enter quiero que se active la ventana modal pero igual gracias por tu ayuda
    – francisco
    el 17 jul. 2018 a las 21:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.