Solution 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"
                }
});

Solution 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" />

Problem :

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?

Comments

Comment posted by stackoverflow.com/questions/20441876/…

Are you able to use JS? Or this is an HTML/CSS only question?

Comment posted by IT-Girl

@IslamElshobokshy JS is ok, since I realized there is not really a HTML solution

Comment posted by Alexandre Elshobokshy

This is exactly what the OP said is not working, what did your answer add?

Comment posted by not a standard attribute and is not supported by most browsers

The autocapitalize attribute is

By