Use jQuery to Kill Spell Checker in SharePoint Lists

There may be no more innocuous function than SharePoint's spell checker. Given that fact, it may seem a little odd that someone would want to remove it. It turns out, however, that the spell check function doesn't work well for anonymous users.

If your public facing web site uses a standard newform.aspx (e.g. for a "provide us feedback") form, the spell checker function is there and you can't easily get rid of it using out of the box SharePoint features. Yet, it won't work for anonymous users (they are prompted to log in when they click on it). We obviously don't want to offer an option to someone that doesn't work.

This article describes how you can remove the spell checking function on a form-by-form basis using jQuery. The approach is as follows:

* Create some jQuery and put it into a content editor web part.
* Export the functioning web part and then upload it to your web part gallery
* Add the pre-built "Hide Spelling Check" web part to your forms.

jQuery Code

We're going to use the jQuery code to remove the spelling option. Before do that, we need to figure out how to find just the bit that we want to manipulate out of the enormous quantity of [censored] HTML that SharePoint throws out for a typical newform.aspx page. Here's a snippet:

<td> <!-- Remove everything in this <td> tag -->  <table cellpadding='1' cellspacing='0'>    <tr>      <td class='ms-toolbar' nowrap>        <a href="javascript:SpellCheckEntirePage [blah blah blah]           title="Spelling..." class='ms-toolbar'>          <img align='absmiddle' alt="Spelling..." [blah blah blah]        </a>      </td>      <td class='ms-toolbar' nowrap>        <a href="javascript:SpellCheckEntirePage [blah blah blah]</a>        <a href="javascript:SpellCheckEntirePage [blah blah blah] >Spelling...        </a>      </td>    </tr>  </table> </td>

After analyzing the above, we can see that if we could simple remove all of the content in the outer <td>, we'd remove the whole spelling morass. The following jQuery code accomplishes this:

Start
<script src="/Documents/jquery-1.4.min.js"></script>
<script type="text/javascript">
  $(function() {
    ($('a:has(img[alt="Spelling..."])')).parent().parent().html("<td/>");
  });
</script>

The first line reference the jQuery library itself. It could just as easily reference it from some other location, including a content delivery network. Read more about that here (look in the "jQuery to the Rescue" section): http://sharepointbriefing.com/features/article.php/3865791/Take-Control-of-Your-OK-and-Cancel-Buttons.htm. The real magic is in this line:

    ($('a:has(img[alt="Spelling..."])')).parent().parent().html("<td/>");

In English, that line says: Find every anchor tag that has any child with an image tag that has an alt text value equal to the literal text "Spelling..." Then, navigate up two parents. Finally, replace that parent with the literal html, "<td/>".

In the end, all of the crazy HTML that SharePoint emitted to display the spell checker button is replaced with ... nothing. An empty <td> tag.

Some Cross-Browser Goodness and a Caveat

The above bit of jQuery definitely works well for anonymous users on a standard newform.aspx and for at least IE 8, IE 7, Firefox and Safari. jQuery handles the cross-browser issues for us.

On the other hand, we're navigating a very specific HTML tree and path. If you've customized your form, the above may not work well for you.

Homework

Now that we have this working on one newform.aspx page, we can easily re-use it. It's already easy enough to re-use by adding a new content editor web part to our page opening it up and pasting in the code. But, that's an unnecessary amount of work and prone to error. Instead, try the following:

1. Export the fully populated CEWP to your desktop.
2. Access the web part gallery.
3. Upload it and give it a useful group (like "My company's web parts") and helpful description.
4. Go to another newform.aspx page and add a web part.
5. Select your web part from your "My company's web parts" group.
6. Done!

Conclusion

Removing the spell check function is probably pretty rare as far as business requirements go. However, when you need to remove the spell checker function, you really need it.

Beyond nuking spell check buttons, this technique shows how you can navigate around a SharePoint page with jQuery and rearrange replace the HTML to suit your needs.

Keep this and other jQuery tricks in your bag and use it when you need to enhance the standard SharePoint user interface.