CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ryanpika
ryanpika

Reputation: 151

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

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>

Upvotes: 2

Views: 146

Answers (4)

Hemal
Hemal

Reputation: 3760

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.

Upvotes: 0

Cyril Cherian
Cyril Cherian

Reputation: 32327

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.

Upvotes: 0

B. Aikey
B. Aikey

Reputation: 239

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?

Upvotes: 1

McMath
McMath

Reputation: 7188

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.

Upvotes: 1

Related Questions