How to Apply Title Case in Input Box Through CSS

How to apply Title Case in input box through css

You can do like following way using css. This will work for all word.

input {   text-transform: capitalize;}::-webkit-input-placeholder {     text-transform: none;}:-moz-placeholder {     text-transform: none;}::-moz-placeholder {     text-transform: none;}:-ms-input-placeholder {     text-transform: none;}

<input type="text" placeholder="test" />

JQuery - OnKeyPress Input Text Title Case

You can use pure CSS by applying text-transform property:

The text-transform CSS property specifies how to capitalize an
element's text. It can be used to make text appear in all-uppercase or
all-lowercase, or with each word capitalized.

#fullname {
    text-transform: capitalize;
}

Fiddle Demo

Force capitalised input to title case in CSS using text-transform

text-transform: capitalize; only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.

Example:

JoHN smith will become JoHN Smith

There is no way to do title-casing using only CSS unless all of your words are all lowercase.

How to output title case text into html field using jquery

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>

Text Input To Sentence Case

Please, note this is a NOT scalabe solution, and will only work with this specif code

Hi, a few notes first:
- you call a ClearFormFields() function but it isn't build anywhere;
- the name onSubmit1() for the function is not really good.
- You've missed a /> in the form tag.

With this is mind, this should do the (THIS) trick:

Javascript:

<script type="text/javascript">
function mySubmitAction(myAction) {
    with (document.getElementById("LitterReg")) {
        AKennel.value = AKennel.value.toUpperCase();
        BDamMother.value = BDamMother.value.toUpperCase();
    }

    document.litterregistration.action = myAction;

    return true;
}
</script>

HTML

<form class="form-style-9" name="litterregistration" id="LitterReg" method="post">
<li>
    <input type="text" name="AKennel" required class="field-style field-split align-left" placeholder="Kennel Name" style="text-transform:capitalize" />
    <input type="text" name="BDamMother" required class="field-style field-split align-right" placeholder="Dame (Mother)" style="text-transform:capitalize"/>
</li>

  <input type="submit" value="Save as PDF" onclick="mySubmitAction('tcpdf/examples/form-litter-regis.php');" />
  <input type="button" onclick="ClearFormFields()" value="Clear all fields" />
</form>

Make input value uppercase in CSS without affecting the placeholder

Each browser engine has a different implementation to control placeholder styling. Use the following:

jsBin example.

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

Needless to say, this only works in browsers that can handle placeholders. (IE9/10+)

Transform ALL CAPS to Proper Case using CSS and jQuery

I modified the code from Greg Dean's answer in a related question.

I would call this algorithm an educated guess at best since it's not actually evaluating English capitalization rules. You'll probably need to add more words to the noCaps list for better accuracy.

Example

JS

var ele = $('p'); 
ele.text(toProperCase(ele.text())); 

function toProperCase(str)
{
    var noCaps = ['of','a','the','and','an','am','or','nor','but','is','if','then', 
'else','when','at','from','by','on','off','for','in','out','to','into','with'];
    return str.replace(/\w\S*/g, function(txt, offset){
        if(offset != 0 && noCaps.indexOf(txt.toLowerCase()) != -1){
            return txt.toLowerCase();    
        }
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

HTML

<p>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</p>

CSS text-transform capitalize on all caps

There is no way to do this with CSS, you could use PHP or Javascript for this.

PHP example:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery example (it's a plugin now!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​

make first character of each word capital in input

You can try this: DEMO

Name:<input type='text' name='name' class='name' style="text-transform: capitalize;" placeholder='Enter your name here'/>

or add text-transform: capitalize; in your name in css.

---

Related Topics