Key event mode

Navigation
2

Can I call a modal boot vpue using a keyevent in VUEJS ?? I do not want any kind of onscreen button or inputs, I want to know if I can call the modal just by pressing a specific key. Like for example the ALT.

    
asked by anonymous 08.10.2018 / 22:34

3 answers

1

You can use Keyboard Events . To know the key code use as a reference: link

Example 

$(document).keypress(function(event) {
  if (event.keyCode  == 13){
    $("#myModal").modal("show");
  }
  

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<p>Esperando abrir o modal quando teclar enter</p>
<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
    
08.10.2018 / 22:46
1

You can use input of type hidden to be acionador of event.

In this way, just capture the key that was pressed and trigger the trigger('click') event to open the modal.

Here contains a table with the key firing number via javascript . 

$(document).keyup(function(ev){
  if(ev.which == 18) { //numero da tecla ALT 
     $('#botaomodal').trigger('click')
  }
});
<span> Pressione "Alt" para exibir o modal </span>

<!-- Input do tipo hidden para disparar o evento  -->
<input type="hidden" id="botaomodal"  data-toggle="modal" data-target="#exampleModal">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Exemplo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Exemplo de modal
      </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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
08.10.2018 / 22:50
1

Well, your question got a bit confusing, I do not know if the solution you want is with jQuery or Vue . "Remembering: It is not recommended to use both for n reasons, so there is vue bootstrap itself to not use the normal bootstrap that uses jQuery. " My example is using Vue , but here are some considerations:

  

1 - Vue by default requires an internal handler event to be triggered along with another, ie you will not be able to open the modal just by pressing the alt

09.10.2018 / 18:46
How to use TrackBy in ngFor in Angular? Match javascript variable to a variable in php