JavaScript SpellCheck lets web developers add spellchecking to any HTML environment, intranet or web page. Add spellchecking to: form elements, textareas, rich editors or any element using CSS selectors.
This example shows both the SpellCheckAsYouType and SpellCheckInWindow features of Javascript Spell Check.
These spell checking capabilities can easily be added to any website or Intranet form in a few minutes.
Read the Hello World tutorial to learn how.
<script type='text/javascript' src='/JavaScriptSpellCheck/include.js' ></script> <script type='text/javascript'>$Spelling.SpellCheckAsYouType('myTextArea')</script> <textarea name="myTextArea" id="myTextArea" cols="30" rows="4" style = 'max-width:500px;width:100%;height:200px;margin-bottom:20px'> This this is a simple exampl of Spell-checking As-You-Type using javascript spellcheck. It works in almost any browser, and supports upto 24 international languages. The button bellow shows an alternative way to spellcheck using javascript spellcheck - using a dialog iwndow! </textarea> <input type="button" value="Spell Check in a Dialog" onclick="$Spelling.SpellCheckInWindow('myTextArea')" />
Function | Description | Example |
---|---|---|
$Spelling.SpellCheckInWindow(Fields) | Opens a spellchecking dialog window
|
Live Demo With Source Code... |
$Spelling.SpellCheckAsYouType(Fields) | Causes any texarea(s) to underline any misspelled words - and provides spelling suggestions on
right click.
|
Live Demo With Source Code... |
$Spelling.LiveValidation(Field,MessageElementId) | Shows a warning message beside Field when it contains spelling errors.
|
Live Demo With Source Code... |
Function | Description | Example |
---|---|---|
$Spelling.BinSpellCheck(input) | Returns bool:
| Live Demo With Source Code... |
$Spelling.BinSpellCheckFields(Fields) | Spell checks one or more fields in your page - and returns bool:
| Live Demo With Source Code... |
$Spelling.SpellCheckSuggest(input) | Returns an array of spelling suggestions for input. | Live Demo With Source Code... |
$Spelling.ListDictionaries() | Returns an array of currently installed dictionaries in your JavaScriptSpellCheck/dictionaries folder. | Live Demo With Source Code... |
Function | Description | Example |
---|---|---|
o = $Spelling.AjaxSpellCheck(input);
o.onSpellCheck = function(result,suggestions){} | Spellchecks a word and asynchronously returns a boolean spellchecking result and suggestions. | Live Demo With Source Code... |
o = $Spelling.AjaxSpellCheckFields(Fields)
o.onValidate = function(result){} | Spell checks one or more fields in your page - and returns asynchronously a boolean spellchecking result. | Live Demo With Source Code... |
o = $Spelling.AjaxDidYouMean(string)
o.onDidYouMean = function(result){} | Asynchronously returns an suggestions string for a search box spellchecking phrase. | Live Demo With Source Code... |
Property | Type | Default Value | Description |
---|---|---|---|
$Spelling.DefaultDictionary | string | "English (International)" | The dictionary language used by JavaSript SpellCheck.
|
$Spelling.UserInterfaceTranslation | string | "en" | Translates the context menu and spellchecker dialog into over 50 international languages.
|
$Spelling.ShowStatisticsScreen | bool | false | Shows a statistics screen (word count, edit count) after SpellCheckInWindow. |
$Spelling.SubmitFormById | string | "" | Will submit a form (identified by its id attribute) once spellchecking once SpellCheckInWindow is complete. |
$Spelling.Theme | string | "js.modern" | Allows you to apply a CSS theme to change the appearance of JavaScript SpellCheck.
|
$Spelling.CaseSensitive | bool | true | Spellchecker notices cAse mIstAkes |
$Spelling.IgnoreAllCaps | bool | true | Spellchecker ignores BLOCK CAPITAL letters which are often acronyms. |
$Spelling.CheckGrammar | bool | true | Spellchecker notices basic grammar mistakes such as sentence casing and repeated words. |
$Spelling.IgnoreNumbers | bool | true | Spellchecker ignores words with numbers in them like "High5" or "MSO7262BGO" |
$Spelling.ShowThesaurus | bool | true | Spellchecker shows a thesaurus and look-up-meaning link during SpellCheckInWindow |
$Spelling.ShowLanguagesInContextMenu | bool | false | Allows the user to pick a dictionary Language from all installed dictionaries during SpellCheckAsYouType |
$Spelling.ServerModel | string | "auto" | Allows you to pick which server model JavaScriptSpellCheck will use for its AJAX requests. Values available are:
|
$Spelling.PopUpStyle
| string | "modal" | SpellCheckInWindow pop-up style:
See the custom PopUps And Themes Tutorial.
|
Event | Description | Example |
---|---|---|
onDialogOpen() | SpellCheckInWindow dialog pops up. | $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onDialogComplete() | SpellCheckInWindow dialog completes successfully - user has not quit | $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onDialogCancel() | SpellCheckInWindow dialog completes is quite by the user | $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onDialogClose() | SpellCheckInWindow dialog closes for any reason | $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onChangeLanguage(language) | SpellCheckInWindow or SpellAsYouType language is changed by the user.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onIgnore(word) | A word is ignored by the user in wither SpellCheckInWindow or SpellAsYouType.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onIgnoreAll(word) | The user clieck 'Ignore All' for a word in either SpellCheckInWindow or SpellAsYouType.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onChangeWord(from,to) | The user changes a word in either SpellCheckInWindow or SpellAsYouType.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onChangeAll(from,to) | The user clicks 'Change All' for a word in SpellCheckInWindow.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onLearnWord(word) | The user "Adds to Dictionary" in either SpellCheckInWindow or SpellAsYouType.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onLearnAutoCorrect(from,to) | The user adds to autocorrect in SpellCheckInWindow.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
onUpdateFields(arrFields) | Any field is updated due to spellchecing.
| $Spelling.PopUpStyle="modeless";
o = $Spelling.SpellCheckInWindow('all'); |
JavaScriptSpellCheck also provides a jQuery SpellCheck Plugin
jQuery Functions
Function | Return Value | Description |
---|---|---|
$('#mySelction').spellCheckInDialog(options) | Opens a spellchecking dialog window | Spelling Instance Object
|
$('#mySelction').spellAsYouType(options) | Spelling Instance Object | Causes any texarea(s) selected to underline any misspelled words - and provides spelling suggestions on right click.
|
$('#mySelction').binSpellCheckFields(options) | *True if all fields are spelled correctly
| Spell checks all field in the selection.
|
jQuery Options
Option | Default Value | Description |
---|---|---|
defaultDictionary | "English (International)" | Default dictionary the spell checker will use.
|
userInterfaceTranslation | "en" | Translates the spellchecker dialog into over 50 international languages automatically. |
showStatisticsScreen | true | Shows statistics such as word count and number of edits after spellCheckInDialog is complete. |
submitFormById | "" | javascript id of a form to submit after spellCheckInDialog is complete. |
theme | "modern" | CSS theme to apply to the spellchecker.
|
caseSensitive | true | Catches spelling mistakes caused by iNcoorect CasIng. |
checkGrammar | true | Catches basic grammar mistakes such as repeated words, sentence casing and punctuation |
ignoreAllCaps | true | Ignores BLOCK CAPS which are often abbreviations or product codes. |
ignoreNumbers | true | Ignores w0rds w1th num8rs in them which are often product codes. |
showThesaurus | true | Shows a thesaurus and word meaning lookup during spellCheckInDialog |
showLanguagesInContextMenu | true | Allows the user to change dictionary 'on the fly' when using spellAsYouType |
serverModel | "auto" | Chooses the server model that does the 'behind the scenes' AJX spellchecking requests. We support:
|
popUpStyle | "auto" | spellCheckInDialog pop-up style:
See the customPopUps And Themes Tutorial. |