6

We have a web application that has a large number of contentEditable <div>'s. With the aggressive autocorrect in Safari on Mac OS X Lion, we have had a number of problems with Safari attempting to autocorrect for our users.

I have been able to stop this from happening by manually going to 'Edit>Spelling and Grammar' and disabling the 'Correct Spelling Automatically' option. I'm wondering, however, if there is a way to do this programmatically, either in javascript or using html attributes. From Apple's documentation (https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/DesigningForms/DesigningForms.html), there is an 'autocorrect' attribute on html form fields that let the site designer decide if autocorrect should be on or not.

Is this 'autocorrect' attribute only on mobile safari? Does it work on contentEditable divs? If not, is there an alternative other that just telling the users to go and turn off autocorrect manually?

Cœur
  • 37,241
  • 25
  • 195
  • 267
erlloyd
  • 485
  • 6
  • 20

2 Answers2

2

You can use the spellcheck attribute to enable or disable spell checking (possible values are true and false)

You can find more details about this attribute in the HTML5 spec.

dcro
  • 13,294
  • 4
  • 66
  • 75
  • That doesn't seem to work for me. OS X Lion still autocorrects my typing in the contentEditable `
    `
     – erlloyd Nov 21 '11 at 20:02
  • Try this demo: http://jsfiddle.net/jhHJ9/ - It seems to work on Safari 5.1.1 and Chrome 15 on OSX Lion – dcro Nov 22 '11 at 07:15
  • unfortunately no, I can second, that it does not work on iOS 5. There's still autocorrection applied. – auco Jan 06 '12 at 02:19
  • I am having the same issue as well. Pretty frustrating for our editors. Seems like an bug on apple's side. – James Apr 12 '13 at 21:08
1

The implementation of the ability to turn off auto-correct/auto-complete in iOS Safari is currently incomplete. For normal input fields, the autocorrect attribute can be used to turn off auto-completion:

<input type="text" name="feild1" autocorrect="off">

But that attribute does nothing for a div with contenteditable set, nor for a tag therein. Both:

<div contenteditable="true" autocorrect="off"><p>Edit me!</p></div>

And:

<div contenteditable="true"><p autocorrect="off">Edit me!</p></div>

Still allow auto-correct and auto-complete. Apple has only allowed the autocorrect attribute and associated ability to turn off auto-correction/completion to apply to traditional form fields.

I'm afraid that I wasn't able to find an alternate solution which would also apply to contentEditable div fields. May I suggest raising the issue on Apple's bug reporter, bugreport.apple.com? This is a clear-cut enough request, that it just might get fixed before too long, provided they're informed about it.

BurningLights
  • 2,387
  • 1
  • 15
  • 22
Pi Marillion
  • 4,465
  • 1
  • 19
  • 20