We need characters here, so the event is keypress.

The algorithm is to take the char and see if it is numeric. Cancel default action if it’s not.

The only minor pitfall is to accept special chars as well as numbers. Otherwise it will become impossible to use arrow keys and delete in browsers which generate keypress on them. Namely, Firefox.

So, here’s the solution:

input.onkeypress = function(e) {
  e = e || event
  var chr = getChar(e)
  
  if (!isNumeric(chr) && chr !== null) {
    return false
  }
}

Helper function getChar gets the character, isNumeric checks for number.

The full solution code is here: tutorial/browser/events/numeric-input/index.html.

The algorithm

There are few steps which comprise the solution:

How to track when a mousie is in clicked state and when it’s not?

An obvious solution here is focus. Key events will trigger on the focused element and bubble up.

To make DIV focusable, we should add tabindex:

<div style="width:41px;height:48px;background:url(mousie.gif)" id="mousie" tabindex="0"></div>

How to track keys?

We need to track arrow keys. So there are two events in our disposal: keydown and keyup. We choose keydown, because it allows to cancel the default action, which is page scrolling.

How to move the mousie?

Like any other element: position:absolute, left and top change depending on the key.

Changing position on click.

In the beginning, the mousie has static position. First, we need change it to absolute on click or on focus which gives better accessibility, because the focus can be given by keyboard tab too.

An absolutely positioned mousie will stick to the left-upper corner of the BODY. To keep mousie at same place, we need to set left/top to it’s current coordinates:

document.getElementById('mousie').onfocus = function() {
  this.style.position = 'absolute'
  var offset = getOffset(this)  
  this.style.left = offset.left + 'px'
  this.style.top = offset.top + 'px'
}

Also, the pitfall is that if the mousie is surronded by other elements, they will shift. An absolutely positioned element jumps out of the flow:

<div style="color:green">Before</div>

<div onclick="this.style.position = 'absolute'" style="cursor:pointer"> 
  Click me 
</div>

<div style="color:red">After</div>

To fix it, we need a placeholder or a wrapper, like this:

<div style="width:41px; height:48px">
  <div style="width:41px;height:48px;background:url(mousie.gif)" id="mousie" tabindex="0"></div>

</div>

Moving the beast

The codes for arrows are 37-38-39-40 (left-top-right-bottom).

document.getElementById('mousie').onkeydown = function(e) {
  e = e || event
  switch(e.keyCode) {
  case 37: // left
    this.style.left = parseInt(this.style.left)-this.offsetWidth+'px'
    return false
  case 38: // up
    this.style.top = parseInt(this.style.top)-this.offsetHeight+'px'
    return false
  case 39: // right
    this.style.left = parseInt(this.style.left)+this.offsetWidth+'px'
    return false
  case 40: // down
    this.style.top = parseInt(this.style.top)+this.offsetHeight+'px'
    return false  
  }
}

Note that the default action of arrows is to scroll the page. So we have to return false to prevent it.

There is no need to remove handlers on blur, because the browser will stop triggering keydown. So when a user blurs the mousie, it stops reacting on keys.

The final solution is tutorial/browser/events/mousie/index.html.

How to track Caps Lock?

Unfortunately, there is no direct access to the state.

But we could use the events:

1. Check keypress events. An uppercased char without shift or a lowercased char with shift means that Caps Lock is on.
2. Check keydown for Caps Lock key. It has keycode 20.

For reliability both keydown and keypress events should be tracked on page-level.

On page load, before anything was printed, we know nothing about Caps Lock, so the state is null:

var capsLockEnabled = null

When a key is pressed, we can try to check if character case and shift do not match:

document.onkeypress = function(e) {
  e = e || event 

  var chr = getChar(e)
  if (!chr) return // special key

  if (chr.toLowerCase() == chr.toUpperCase()) {
    // caseless symbol, like whitespace 
    // can't use it to detect Caps Lock
    return
  }

  capsLockEnabled = (chr.toLowerCase() == chr && e.shiftKey) || (chr.toUpperCase() == chr && !e.shiftKey)
}

When a user presses Caps Lock, we should change current Caps Lock state. But we can do it only if we know it.

For example, when a user enteres page, we don’t know if Caps Lock is on. Then a keydown for Caps Lock detected. But we still don’t know what the new state is - did he disable Caps Lock or enable it.

document.onkeydown = function(e) {
  e = e || event
  
  if (e.keyCode == 20 && capsLockEnabled !== null) {
    capsLockEnabled = !capsLockEnabled
  }
}

Now, the input. The task is to show a warning about Caps Lock On to protect the user from password errors.

1. First, the user focuses on it. We should show Caps Lock warning if we know it’s enabled.
2. The user starts to type. Every keypress bubbles up to document.keypress handler which updates capsLockEnabled.

   We can’t use input.onkeypress to indicate the state to the user, because it will work before document.onkeypress (cause of bubbling) and hence before we know the Caps Lock state.

   There are many ways to solve this problem. We’ll stick to simplest and assign caps lock indication handler to input.onkeyup. It always happens after keypress.

3. At last, user blurs the input. The Caps Lock warning may happen to be on, but it is not needed any more if the input is blurred. So we need to hide it.

The input checking code:

<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>

<div style="display:none;color:red" id="caps">Warning: Caps Lock is on!</div>

<script>
function checkCapsWarning() {
  document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none'
}

function removeCapsWarning() {
  document.getElementById('caps').style.display = 'none'
}
</script>

The full code for the solution is here: tutorial/browser/events/capslock/index.html.

As you notice in the source code, #view is the DIV for the result and #area is the editable textarea.

The look

First, the look. Because we transform a DIV into TEXTAREA and back, we make them look almost same:

#view, #area {
  height:150px;
  width:400px;
  font-family:arial;
}

The textarea should be emphased somehow. A possible way is to add aborder. But if I set the border, this will change the box, enlarge it and shift the text a little bit.

To make #area size same as #view we use padding:

#view {  
  /* padding + border = 3px */
  padding: 2px; 
  border:1px solid black; 
}

The #area

#area {
  border: 3px groove blue;  
  padding: 0px;

  display:none;
}

It is initially hidden. Also, the following piece hides extra border around focused textarea which appears in Chrome/Safari:

#area:focus { 
  outline: none; /* remove focus border in Safari */
}

Tracking codes

To track keys, we need their scan codes, not characters. That’s important, because such hotkey will work in all languages and all cases. So, keydown is a reasonable choice:

document.onkeydown = function(e) {
  e = e || event 
  if (e.keyCode == 27) { // escape
    cancel()
    return false
  }

  if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) && !area.offsetHeight) {
    edit()
    return false
  }

  if ((e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) && area.offsetHeight) {
    save()
    return false
  }
}

In the example above, offsetHeight is checked to see if the element is visible. It is a very reliable way on all elements except for TR tag (works with tweaks).

Unlike simple display=='none' check it works with element hidden by styles (as we have here) and also for elements with hidden parents.

Editing

The following functions switch between modes. HTML is allowed, so the direct transform from/to TEXTAREA is possible.

function edit() {
    view.style.display = 'none'
    area.value = view.innerHTML
    area.style.display = 'block'
    area.focus()
}

function save() {
    area.style.display = 'none'
    view.innerHTML = area.value
    view.style.display = 'block'
}

function cancel() {
    area.style.display = 'none'
    view.style.display = 'block'
}

The full solution is here: tutorial/browser/events/hotfield/index.html.
To test it, focus in the right iframe please.