How to enable autocapitalization for contenteditable elements on mobile

Question

I have a contenteditable div where users can post comments:

<div contenteditable="true"></div>

However, when you type in this field on a mobile phone, it does not autocapitalize the first letter after a sentence.

On mobile, it should capitalize the first letter after each sentence ends. So:

"This is a sentence. Now, the word 'now' should be capitalized"

I know that this may only be a feature for input fields, but is there a way to achieve/hack this on a contenteditable element?

Answer 1

Somehow I realized that since im using Emojionearea, autocapitalize was not working. So it's my own fault for not initializing Emojionearea with autocapitalize.

I apologize for leaving this detail behind. Maybe this question will help others that are also using Emojionearea.

Correct code should be:

Html

 <div id='textField' contenteditable="true" ></div>

JS

 $('#textField').emojioneArea({
                placeholder: $(this).data("placeholder"),
                pickerPosition: "bottom",
                attributes: {
                    spellcheck: true,
                    autocapitalize: "on"
                }
});

Answer 2

If you're looking for a HTML/CSS answer, the Autocapitalise global attribute is what you want. Setting Autocapitalise to either "on" or "sentences" will capitalize the first letter of each sentence. Here is an example:

<input type="text" autocapitalise="on" />