Why doesn't the autocapitalize attribute work with non-virtual keyboards?

Question

I just found that we can use this attribute to specify which case the letters should be entered in, but that doesn't work for me.

Example:

 <input type="text" autocapitalize="words" name="subject" value="Website Feedback" />

I set this attr to words but still type with lover case each new word, so how it should work?

Answer 1

As many in the comments have pointed out, the attribute does not affect phisical keyboards. You can achieve this using javascript, by listening to the keyup event and capitalizing the text every time it changes. Here is a working example:

 $(".autocapitalize").keyup(function () { const originalValue = $(this).val(); const capitalizedValue = originalValue.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase()); $(this).val(capitalizedValue).focus() });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="autocapitalize" autocapitalize="words" name="subject" value="" />

Answer 2

It seems that some browsers do not take this attribute into account more "autocapitalize attribute doesn't affect behavior when typing on a physical keyboard".

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize

Maybe you should use a function instead.