Applet Focusing with Javascript

Introduction
Java Applet
Javascript Focus

Introduction

This is a quick instructional/informational piece on how to give/always have focus on a Java Applet in an HTML page using Javascript.
The reason for this is that there seems to be a rather astounding lack of information on the subject, and the blurbs that one can find either don't work or are problematic in some way.

Java Applet

Before we actually begin on the HTML/Javascript side of things, it would be best to first create a fully functional Java applet to allow us to understand what is going on.

The Java applet is rather simple and will do the following:
1. On keypress, draw the KeyCode on our applet canvas.
2. On keyrelease, draw the KeyCode on our applet canvas.
3. On applet focus, draw notification on the applet canvas.
4. On applet de-focus, draw notifcation on the applet canvas.

This provides us with the framework to ensure all events are being processed as they should be.

focusApplet.java

import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class focusApplet extends Applet
	implements KeyListener, FocusListener {

	// boolean array for key-down/etc.
	// reason is that keypresses repeat if held down - unwanted!
	boolean[] keys = new boolean[256];

	String s = "";

	public void init() {
		setBackground( Color.black );

		addKeyListener( this );
		addFocusListener( this );
	}

	public void keyPressed( KeyEvent e ) {
		if (!keys[e.getKeyCode()]) {
			s = s+"KEYPRESS "+e.getKeyCode();
			keys[e.getKeyCode()] = true;

			repaint();
			e.consume();
		}
	}
	public void keyReleased( KeyEvent e ) {
		s = "KEYRELEASE "+e.getKeyCode();
		keys[e.getKeyCode()] = false;

		repaint();
		e.consume();
	}

	public void keyTyped( KeyEvent e ) {
	}

	public void focusGained(FocusEvent e) {
		s = "Focus Gained";
		repaint();
	}

	public void focusLost(FocusEvent e) {
		s = "Focus Lost";
		repaint();
	}

	public void paint( Graphics g ) {
		g.setColor( Color.white );
		g.drawString( s, 24, 24 );
	}
}

This snippet can then be easily compiled with a command such as:

gcj -C focusApplet.java

Now that we have a functioning Java Applet, I would recommend that you test it out by embedding it on a simple HTML page. If the .class file is in the same location as where the HTML page will be, you only need to add the following to the body of an HTML page:

<applet id="focusApplet" width=300 height=64 code="focusApplet.class"></applet>

Which would then show the following applet:

You can easily test out the various key and focus events on the embeded applet above.

However, depending on the situation, you will probably want to control the focus of the applet in a manner that you do not have to click on the applet to allow it to gain focus. In this regard, then, we need to use Javascript to give the browser focus onto the applet.

Javascript Focus

Now, for the Javascript side of things, we will create two different buttons. The first will simply switch focus to the Java applet when it is clicked. The second will cause any window.onfocus and window.onclick events to switch focus to the Java applet.

Following the <applet> tag, put the following two buttons:

<button onClick="document.getElementById('focusApplet').requestFocus()">focus on applet</button>

<button onClick="startFocus('focusApplet')">permanent focus</button>

For the startFocus(appletID) function, go ahead and put the following in your <head> :

<script type="text/javascript">
function startFocus(id) {
	window.onfocus = function() {
		document.getElementById(id).requestFocus();
	};
	window.onclick = function() {
		document.getElementById(id).requestFocus();
	};
}
</script>

Fully functioning example:

If you click on the first button, the applet should gain browser focus.
If you click on the second button, all keypresses and onfocus events should automatically cause the applet to gain focus. To test this you can click outside of the applet, which should cause the applet to lose focus for a moment, but then quickly regain focus. You can then also alt-tab/switch windows, which will cause a loss of focus, but when you alt-tab/switch back to the window, the applet should automatically regain focus.

Please keep in mind that when having a permanent focus, all browser shortcut commands will be effectively disabled(ctl-R, ctl-W, etc.). Do not annoy your userbase!

0.0064349174499512 盜