htmlinputmobilecontenteditableautocapitalize

How to enable autocapitalization for contenteditable elements on mobile

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?

Solution

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