Custom HTML Prompt / Javascript Keyboard Events Ignored?

Questions & Suggestions
1

Are keyboard events unsupported in Custom HTML Prompt (CHP)?

Simple example attached - CHP seems to ignore them.

Custom HTML Prompt - Javascript KeyUp Event Test.kmmacros (2.3 KB)

2

They are supported indeed. I use them extensively. Here's the way I did it for Mirror Mirror:

Custom HTML Prompt.kmactions (4.6 KB)

1 Like
3

Thank you, Mike - I'll have a look. Any idea why the test instance doesn't seem to work? (It's fine in a stand-alone browser.)

4

For one thing, Keyboard Maestro's implementation of WebKit does not support alert().

1 Like
5

Technically, it does support it, it shows up in the Engine.log file. It just doesn't display a UI alert.

1 Like
6

And the alert does seem to fire if you are in one of the edit fields and press the return key.

1 Like
8

Technically, it does support it, it shows up in the Engine.log file. It just doesn't display a UI alert.

Peter, does someone need to explain to you what it means for something to work?

9

When I press Return in either field running the macro, nothing happens. An alert does pop up in a browser when I load the same code.

I do see "Custom HTML Prompt Alert:" in the Engine log, though.

So how would one get a UI alert to display?

1 Like
10

I'm guessing you'd need to do it manually. If I can work it, I'll post. Thanks for your replies.

11

Like this -


<style>
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
1 Like
12

If you can point to where in the JavaScript standard library specification it says that an alert cannot be displayed in a log file, I'll be happy to not change the behaviour.

Until and after then, the alert is displayed in the log file.

1 Like
13

Thanks, I never knew to look in the Engine log because I was expecting the UI popup that alert() produces in a browser context.

WKUIDelegate seems to explain the UI requirement for an alert (and other panels) in WebKit but "a delegate" doesn't seem like something a user could effect.

1 Like
14

Nice. But there went half an hour tweaking the CSS! :sweat_smile:

1 Like
15

There is literally no such thing as a "JavaScript standard library specification".

16

That is literally my point. The alert function does what the alert function does, which in Keyboard Maestro’s case is display the text in the Engine.log file.