-1

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?

IT-Girl
  • 448
  • 5
  • 24
  • Are you able to use JS? Or this is an HTML/CSS only question? https://stackoverflow.com/questions/20441876/format-lowercased-string-to-capitalize-the-begining-of-each-sentence – Alexandre Elshobokshy Feb 26 '20 at 11:31
  • @IslamElshobokshy JS is ok, since I realized there is not really a HTML solution – IT-Girl Feb 27 '20 at 17:57

2 Answers2

0

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"
                }
});
IT-Girl
  • 448
  • 5
  • 24
-1

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" />
ItsMeNaira
  • 360
  • 1
  • 12