NOTE: CodeMirror6 does not experience this issue, see https://github.com/codemirror/dev/issues/1020#issuecomment-1343082372.
Using Safari on iOS 15.6.1 I am unable to get autocapitalization and autocorrect to work using the configuration specified in the manual here https://codemirror.net/5/doc/manual.html#config, with CodeMirror 5.65.10 seen here https://cdnjs.com/libraries/codemirror/5.65.10 (also tested master
branch).
The basic code is:
var myTextarea = document.getElementById("myCode");
editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true,
autocorrect: true,
spellcheck: true,
autocapitalize: true,
inputStyle: 'textarea'
});
For reference here are code pens showing behavior of plain textarea and contenteditable:
- Plain textarea behavior https://codepen.io/josephdpurcell/pen/WNymRMw
- Plain contenteditable behavior https://codepen.io/josephdpurcell/pen/oNyVBEa
A PASS is given if the following are true:
- Autocapitalization: The first character ever typed, a character after a punctuation, a character at the beginning of a new line each have the caps key enabled so the character is typed as an uppercase character.
- Autocorrect: Any phrase in the input is a candidate for being autocorrected.
- Autopunctuation: A double-space after the characters
[a-zA-Z0-9]
turns into a period followed by 1 space.
Here are code pens I've created to test different scenarios, I've put them in a collection https://codepen.io/collection/NqEdwO. And note testing results below.
Legend for cases:
textarea
: The HTML element is a textarea
.
contenteditable
: The HTML element is a contenteditable
.
inputStyle
: The input style was forced to textarea
or contenteditable
, based on which HTML element was used.
options
: The autocorrect: true
and autocapitalization: true
arguments were passed as options to CodeMirror.
setOption
: The autocorrect
and autocapitalization
arguments were passed using setoption
.
setAttribute
: The JavaScript setAttribute
function was used to "manually" set the autocorrect
and autocapitalize
options, either using getInputField
or querySelectorAll
to get the elements.
setTimeout + X
: The X
was wrapped in a setTimeout.
default
: No options were given; the CodeMirror defaults will be used.
| Case | Autocapitalization | Autocorrect | Autopunctuation |
| ------------ | ------------ | ------------ | ------------ |
| CASE 1: textarea, inputStyle, options | ❌ | ❌ | ✅ |
| CASE 2: textarea, inputStyle, options, setOption | ❌ | ❌ | ✅ |
| CASE 3: textarea, inputStype, options, setTimeout + setOption | ❌ | ❌ | ✅ |
| CASE 4: contenteditable, inputStyle, options | ❌ | ❌ | ❌ |
| CASE 5: contenteditable, inputStyle, setAttribute w/getInputField
| ❌1 | ❌ | ✅ |
| CASE 6: textarea, inputStyle, default | ❌ | ❌ | ✅ |
| CASE 7: contenteditable, inputStyle, default | ❌ | ❌ | ❌ |
| CASE 8: textarea, inputStyle, options, setTimeout + setAttribute w/querySelectorAll
| ❌2 | ✅ | ✅ |
| CASE 9: textarea, inputStyle, options, setAttribute w/getInputField
| ❌3 | ❌ | ✅ |
| CASE 10: textarea, options | ❌4 | ❌ | ❌ |
| CASE 11: contenteditable, options | ❌5 | ❌ | ❌ |
| CASE 12: contenteditable using div
, options | ❌6 | ❌ | ❌ |
1 Only the first letter of the first word typed was capitalized, but never again.
2 Autocapitalization did not happen on new lines unless capitalization was already on, eg type "W-space-return-w" and you will get an upperacse W
on the first line and a lowercase w
on the second line but if you type "W-space-space-return-w" you get an uppercase W
with a period on the first line and an uppercase W
on the second line.
3 Same as note 2, autocapitalization is a little finicky.
4 Autocapitalization did not happen on new lines, nor after punctuation.
5 Autocapitalization did not happen on new lines, nor after punctuation.
6 Autocapitalization did not happen on new lines, nor after punctuation.
Note that CASE 12 is the only case that does not use the CodeMirror.fromTextArea
pattern.
Recording of testing CASE 1-3 and CASE 8 at 2x speed (note the video has it mis-labeled):
Expand to view video
https://user-images.githubusercontent.com/778111/206243274-e6a3d975-270f-4be3-8d10-9fe1a05fc637.MOV
Recording does not include cases 4, 5, 6, 7, nor 9.
Edit 12/7 3p ET: Clarified that autopunctuation does work.
Edit 12/7 6p ET: Added case 4, 5, and pass 2.
Edit 12/8 6a ET: Added case 6, 7, demos, and summary. Reflect discovery that all scenarios fail.
Edit 12/8 945a ET: Added case 10, 11, 12.
Edit 12/8 115p ET: Noted that CodeMirror6 does not have this issue.
Edit 12/8 315p ET: Modified to use a table for readability, and used the word CASE instead of pass/fail in the label.