First letter of first word in a sentence to uppercase

Question

I am using style="text-transform:capitalize" so the get the first letter of an word to uppercase. But now I am facing the problem that each 1st letter of each word is converted to uppercase. How to prevent this?

So helle new world becomes Hello new world

Original code:

<input type="text" class="form-control" id="bedrijfsnaam" name="bedrijfsnaam" value="" style="text-transform:capitalize">

Possible duplicate of [Auto Capitalize ONLY the First Letter of Each Word in an Input Field](https://stackoverflow.com/questions/41048336/auto-capitalize-only-the-first-letter-of-each-word-in-an-input-field) — Raghu, Dec 10 '17 at 13:42
Please refer https://stackoverflow.com/questions/41048336/auto-capitalize-only-the-first-letter-of-each-word-in-an-input-field which already has an excellent answer. — Raghu, Dec 10 '17 at 13:43

score 2 · Answer 1 · answered Dec 10 '17 at 13:34

Not sure about pure CSS solution, but this simple js could help:

<input type="text" class="form-control" id="bedrijfsnaam" name="bedrijfsnaam" value="">

field=document.getElementById('bedrijfsnaam');

field.onkeyup = function(){
str=this.value;
this.value=str[0].toUpperCase()+str.slice(1,str.length);

};

Snippet:

field=document.getElementById('bedrijfsnaam');

field.onkeyup = function(){
str=this.value;
this.value=str[0].toUpperCase()+str.slice(1,str.length);

};

<input type="text" class="form-control" id="bedrijfsnaam" name="bedrijfsnaam" value="">

score 0 · Answer 2 · answered Dec 10 '17 at 13:23

0

You can capitalize the first letter of the #bedrijfsnaam element by using the pseudo-element :first-letter

 #bedrijfsnaam:first-letter{
      text-transform: capitalize; 
      }

answered Dec 10 '17 at 13:23

Rahele Dadmand

573
1
4
17

score 0 · Answer 3 · answered Dec 10 '17 at 13:29

0

You can try this

#bedrijfsnaam {
  text-transform: lowercase;
}

#bedrijfsnaam:first-letter {
    text-transform: uppercase;
}

answered Dec 10 '17 at 13:29

Kingsley Solomon

481
1
4
9

score 0 · Answer 4 · answered Dec 10 '17 at 13:40

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script>
        $(document).ready(function(){
            $('input').keypress(function(){
                var $this = $(this),
                val = $this.val();
                val = val.substr(0, 1).toUpperCase() + val.substr(1);
                $this.val(val);
            });
        });

        </script>

    </head>

    <body>

        <input type='text' name='name' class='name' placeholder='Enter your name here'/>

    </body>
</html>

score 0 · Answer 5 · answered Dec 10 '17 at 13:44

#bedrijfsnaam::first-letter,
#bedrijfsnaam:first-letter {
    text-transform: uppercase;
}

Explanation:

Old browsers cannot understand ::first-letter (with 2 double colon), but can understand :first-letter (with 1 double colon). So the above code should work with most browsers.
We can't apply ::first-letter directly to the HTML element's style because it requires state (which is ::first-letter)

score 0 · Answer 6 · answered Dec 10 '17 at 16:40

selector::first-letter:{
text-transform: uppercase
}

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Style First Letter

First letter of first word in a sentence to uppercase

6 Answers6