JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<h4>
  Custom Key Mapping:
</h4>

<form id="customkeymappings">
  <div>
    <label>Left: </label><button type="button" class="keybtn" id="setkeyleftcode" data-toggle="modal" data-target="#theModal" data-setting="left">not set</button>
  </div>
  <div>
    <label>Right: </label><button type="button" class="keybtn" id="setkeyrightcode" data-toggle="modal" data-target="#theModal" data-setting="right">not set</button>
  </div>
</form>

<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h5 class="modal-title">Press the key to set</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <input id="readkeypress" class="maskedinput" value="" />
      <input id="setting" type="hidden" value="" />
    </div>
  </div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
}

#customkeymappings {
  margin: 20px;
  padding: 10px;
  color: #fff;
  background-color: #414141;
  border-radius: 10px;
}

#customkeymappings div {
  margin-top: 10px;
  margin-bottom: 10px;
}

#customkeymappings label {
  display: inline-block;
  width: 90px;
}

#customkeymappings button + input {
  width: 40px;
}

.keybtn {
  cursor: pointer;
  font-size: 0.75em;
  width: 60px;
  height: 35px;
  padding: 5px;
  border: 0;
  color: #fff;
  background-color: #666666;
}

#customkeymappings input {
  margin-left: 10px;
}

.maskedinput {
  position: absolute;
  width: 0px;
  border: 0;
}

.modal-header {
  border: 0 !important;
}

JavaScript

$("#readkeypress").on('keyup', function(e) {
  var keyset = e.key.replace(' ', 'Space');
  var setting = $("#setting").val();
  $("#setkey"+setting+"code").html(keyset);
  $("#theModal").modal('hide')
});

$('#theModal').on('show.bs.modal', function(e) {
	var theSetting = $(e.relatedTarget).attr("data-setting");
  $("#setting").val(theSetting);
  $(".modal-title").html("Press the key to set " + theSetting);
})

$('#theModal').on('shown.bs.modal', function() {
  $('#readkeypress').focus();
})