Auto capitilize Html Text Box for Desktop Browsers [chrome, safari, firefox ...]

Question

I search on the web, but all the solutions are mobile only. Is there any autocapitalize attribute for desktop browser such as Chrome, Firefox or Safari not in mobile devices.

What I actually want to do is that I want the create an input text, and in the scenario when user type something, input must start with capitalized letter

Is there any way to do it

possible duplicate of [make the first character uppercase in css](http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css) — Rahul Kadukar, Dec 11 '13 at 17:05
Should the text be displayed with a capital letter, or should it actually be changed so that when the form is submitted, the submitted input has a capital letter? — Nic Wortel, Dec 11 '13 at 17:06

score 4 · Accepted Answer · edited May 23 '17 at 10:25

4

Try:

input {
    text-transform: capitalize;
}

See this fiddle here

To extend on the answer if you wish the first letter to be capitalized on submit, you need to either add some javascript, e.g.:

$('input[type="text"]').keyup(function(evt){

      // force: true to lower case all letter except first
      var cp_value= ucfirst($(this).val(),true) ;

      // to capitalize all words  
      //var cp_value= ucwords($(this).val(),true) ;


      $(this).val(cp_value );

   });

(From this post)

Or perform some post processing on the server side (such as by using e.g. in php ucfirst($string);

edited May 23 '17 at 10:25

Community

1
1

answered Dec 11 '13 at 17:01

SW4

69,876
20
132
137

thank you for the solution, it works on every browser – Mehmet Eren Yener Dec 11 '13 at 17:05
1

@user1929072 does this answer your question? Be aware that, while this **displays** the text with a capital letter, the real text remains unchanged. So when the form is submitted, you will get the text without capital letters. – Nic Wortel Dec 11 '13 at 17:08
@Nic, I've extended the answer with some options – SW4 Dec 11 '13 at 17:12
@Nic I am using this variable in database search and it is case insensitive, so it is the answer for me – Mehmet Eren Yener Dec 11 '13 at 17:13

score 0 · Answer 2 · answered Dec 11 '13 at 17:04

0

input{
  text-transform: capitalize;
}

http://jsfiddle.net/RtA4k/

answered Dec 11 '13 at 17:04

Rahul Kadukar

858
3
15
35

Auto capitilize Html Text Box for Desktop Browsers [chrome, safari, firefox ...]

2 Answers2