How to capture capitalized input letter which is capitalized by css: text-transform:capitalize

Question

I found the capitalized letter which is capitalized with css text-transform:capitalize was not capitalized when captured by javascript. I wondered what's the easiest way to fix this?

Demo below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<input id="box" type="text" style="text-transform:capitalize">
<button id="showinput">type in something then press me</button>
</html>

<script>
$("#showinput").click(function(){
txt=$("#box").val();
alert(txt+"   as you can see, the first letter of each word is not capitalized!");
})
</script>

`text-transform` just changes the appearance of the text, not the actual value. — Hemal, Feb 13 '16 at 03:52

score 1 · Answer 1 · answered Feb 13 '16 at 03:17

The CSS text-transform property only transforms what the user sees on the screen (as with all CSS properties). It does not interact with your JavaScript code. I would suggest applying a similar function to the string in JavaScript, such as _.upperCase from lodash.

score 1 · Answer 2 · edited May 23 '17 at 10:28

As McMath said, CSS text-transform doesn't interact with Javascript. Here is a solution that would give the result you are wanting by capitalizing the first letter in Javascript:

$("#showinput").click(function(){
  txt = $("#box").val();
  txt = txt.charAt(0).toUpperCase() + txt.slice(1);
  alert(txt+"   as you can see, the first letter of each word is capitalized!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
  <input id="box" type="text" style="text-transform:capitalize">
  <button id="showinput">type in something then press me</button>
</html>

Source: How do I make the first letter of a string uppercase in JavaScript?

If typing in multiple words like "hello world" the "w" is not capitalized with your kind code, but thanks. If typing starts with space, it not works also — ryanpika, Feb 13 '16 at 03:47

Cyril Cherian · Answer 3 · 2016-02-13T04:43:13.240

0

Do this in your js using regex

    $("#showinput").click(function(){
    txt=$("#box").val();
    txt = txt.trim().replace(/\b\w{3,}/g, function (l) {
      return l.charAt(0).toUpperCase() + l.slice(1);
    });

    alert(txt+"   as you can see, the first letter of each word is not capitalized!");
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <input id="box" type="text" style="text-transform:capitalize">
    <button id="showinput">type in something then press me</button>
    </html>

Test Cases: Hello World

NOTE This also handle the case when the entered text has space in between, style text-transform:capitalize handles the case of capitalizing each word.

edited Feb 13 '16 at 04:43

answered Feb 13 '16 at 03:19

Cyril Cherian

32,177
7
46
55

With hug, if typing starts with multiple space, it not works then. – ryanpika Feb 13 '16 at 03:47
with a tighter hug!...:D good point do a trim then `txt.trim().replace(/\b\w{3,}/g, function (l) { return l.charAt(0).toUpperCase() + l.slice(1); });` – Cyril Cherian Feb 13 '16 at 03:55
@ryanpika See my answer if it helps. – Hemal Feb 13 '16 at 04:31

Hemal · Answer 4 · 2016-02-13T05:00:20.740

FIDDLE

SCRIPT

$("#showinput").click(function(){
txt=$("#box").val();
var newtxt=txt.split(" ");
var tmp=[];
for(i=0;i<newtxt.length;i++)
{
    tmp.push(newtxt[i].trim().charAt(0).toUpperCase()+ newtxt[i].slice(1));

}
//alert(tmp.join(" "));//YOU CAN USE THIS ALSO
alert(tmp.join().replace(","," ")+"   as you can see, the first letter of each word is not capitalized!");//YOU CAN USE tmp.join(" ") also
})

DESCRIPTION

What I have tried is, First get each word in array splitted by a space. Then converting first letter of each word while trimming any space, then joining it with rest of word and getting it all in an array.

Then joining the array with .join() and then replacing , with a space. I hope this will help you.

See fiddle for demo, its working as you said.

How to capture capitalized input letter which is capitalized by css: text-transform:capitalize

4 Answers4