How to output title case text into html field using jquery

Question

I am using the following jQuery to allow a user to enter some text into a text field which is then rendered elsewhere on the screen within a div.

I am able to get the text to render in uppercase and lowercase but I'm not too sure how to get it to render in title case, or a mixture of both cases.

This is the code:

jQuery('#fhc-sloganText').keyup(function() {

    var plateSlogan = document.getElementById("plateSlogan");

    plateSlogan.innerHTML = this.value.toLowerCase();

});

I believe I need to be using RegExp but I'm finding it difficult trying to implement it into this scenario.

Possible duplicate of [Convert string to title case with JavaScript](https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript) — Cobus Kruger, Jul 26 '18 at 20:36
Can you use CSS or do you need the actual value to be title cased? `text-transform: capitalize` would display it properly... — Fissure King, Jul 26 '18 at 20:36
you can use the capitalize function here : [link](https://stackoverflow.com/a/51346019/4949758) or simply use `text-transform: capitalize` which i believe is the simplest. — Faical ARAB, Jul 26 '18 at 20:40
No, CSS won't work as the field is a product attribute which is passed on to the basket and checkout. The client then needs to print the exact characters on to the product for the customer. So if they're all uppercase or lowercase, this will be shown in the order. CSS only shows changes on the website front end. — user2770714, Jul 27 '18 at 00:52

Unmitigated · Accepted Answer · 2018-07-27T13:10:07.850

You can use this function to capitalize each word in a String.

function toTitleCase(str){
  return str.replace(/\b\w/g, l => l.toUpperCase());
}

#plateSlogan{
  height: 50px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fhc-sloganText"/>
<p/>
<div id="plateSlogan"></div>
<script>
jQuery('#fhc-sloganText').keyup(function() {

    var plateSlogan = document.getElementById("plateSlogan");

    plateSlogan.innerHTML = this.value.replace(/\b\w/g, l => l.toUpperCase());

});
</script>

You can use this function to capitalize the first word in a String>

function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + string.slice(1);
}

#plateSlogan{
  height: 50px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fhc-sloganText"/>
<p/>
<div id="plateSlogan"></div>
<script>
jQuery('#fhc-sloganText').keyup(function() {

    var plateSlogan = document.getElementById("plateSlogan");

    plateSlogan.innerHTML = this.value.charAt(0).toUpperCase() + this.value.slice(1);

});
</script>

Thanks for that! It's almost perfect. How would I go about amending it so the user can have any case they wish to use. So they could type something like "Hello this is my slogan" instead of how it currently renders it "Hello This Is My Slogan". — user2770714, Jul 27 '18 at 11:16

score 2 · Answer 2 · answered Jul 26 '18 at 20:38

2

You can achieve this goal much easier. Use CSS: plateSlogan.style.textTransform = "capitalize";

Or, if you are using jQuery, you can use the function .css

answered Jul 26 '18 at 20:38

Mojtaba

4,852
5
21
38

No, CSS won't work as the field is a product attribute which is passed on to the basket and checkout. The client then needs to print the exact characters on to the product for the customer. So if they're all uppercase or lowercase, this will be shown in the order. CSS only shows changes on the website front end. – user2770714 Jul 27 '18 at 00:53
2

@user2770714 if that is the case, I recommend you to try hev1's solution. Should work – Mojtaba Jul 27 '18 at 01:38

How to output title case text into html field using jquery

2 Answers2