Spell checking in Firefox

Dan — Wed, 10 Dec 2008 21:07:05 +0000

A handy tip I came across the other day was how to spell-check an entire web page using Firefox – not just textarea elements.

You basically put the page into design mode – so the content becomes editable. Enter this in the URL bar:

javascript:void(document.designMode='on');

You can also add spell checking to fields which do not have it by default (e.g. single-line input elements) by adding a “spellcheck” attribute set to “true”, e.g.:

<input type="text" size="50" spellcheck="true">

See https://developer.mozilla.org/en/Controlling_spell_checking_in_HTML_forms for more information.

Fixing a disappearing caret in Firefox

Dan — Sun, 19 Oct 2008 12:45:53 +0000

There are many issues with Firefox hiding the caret (cursor) in text fields which have focus. There are various fixes, depending on the specifics of your issue, which mostly involve adding a style of “overflow:auto” to the input or container in question.

There is one case that doesn’t appear to have a fix, other than upgrading to Firefox 3: The cursor (caret) in a text input turns invisible when it is over a fixed element. I’ve known about this problem for a while, and have tried many solutions that fixed similar issues, but they never seemed to work for this specific one.

I’ve found a solution that works, but it has 2 drawbacks:

It requires JavaScript to work
It causes rendering errors on the fixed element when scrolling (almost as if the fixed element is scrolling as well)

Using the test harness below, you can see the problem and the fix. I’ve included my test background image after the code, to make the rendering problem very obvious.


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Disappearing caret bug - workaround</title>
 
	<style type="text/css">
		#fixedDiv {
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: url(caretBugBg.gif);
			position: fixed;
		}
 
		#contentDiv {
			position: relative;
		}
	</style>
 
	<script type="text/javascript">
		function fixCaretBug() {
			document.getElementById('fixedDiv').style.zIndex = -1;
			setTimeout(fixCaretBugPartTwo, 0);
		}
 
		function fixCaretBugPartTwo() {
			document.getElementById('fixedDiv').style.zIndex = 0;
		}
	</script>
</head>
 
<body>
	<div id="fixedDiv"></div>
 
	<div id="contentDiv">
		<form>
			<input type="text" size="50" value="You cannot see the caret in this text input field..." />
			<br />
			<input type="button" value="Click me to fix that!" onclick="fixCaretBug();" />
		</form>
 
		<p>This text...</p>
		<br /><br /><br /><br />
 
		<p>is used...</p>
		<br /><br /><br /><br />
 
		<p>to produce a vertical scrollbar.</p>
		<br /><br /><br /><br />
 
		<p>If you cannot see a vertical scrollbar,</p>
		<br /><br /><br /><br />
 
		<p>reduce the size of your browser window.</p>
		<br /><br /><br /><br />
	</div>
 
</body>
</html>

There is a small flicker when the fix is enabled, although this could potentially be fixed by hooking into the DOMContentLoaded event and running the fix before the background image is loaded.

My test background image

Code Couch » Firefox

Spell checking in Firefox

Fixing a disappearing caret in Firefox