Alfiza malek Alfiza malek -4 years ago 147
CSS Question

In html text-transform property not working with initial in the text box

In my HTML page I set the style of my text box as

initial
for
text-transform
property, But not working with
initial
. I also test with other values like
uppercase
,
lowercase
,
capitalize
works fine but with
initial
no change. I want when user enter text into the text box text should input with first letter capital and remaining as he/she entered.

<!DOCTYPE html>
<html>
<head>
<style>

::-webkit-input-placeholder {
text-transform: initial;

}

:-moz-placeholder {
text-transform: initial;
}

::-moz-placeholder {
text-transform: initial;
}

:-ms-input-placeholder {
text-transform: initial;
}
input{
text-transform: initial;
}
</style>
</head>
<body>
<input type="text" placeholder="text" />
</body>
</html>


Also tried

<html>
<head>
<style>
input:first-letter {
text-transform: uppercase;
}
</style>
</head>
<body>

<input type='text' >

</body>
</html>


No luck.

Answer Source

You can do this inside a function: For example:

$(document).ready(function() {    
    $('input').on('keypress', function(event) {
        var $this = $(this),
        val = $this.val();
        val = val.charAt(0).toUpperCase() + val.substr(1);
        $this.val(val);
   });
});    

This will give you the desired output. Hope this helps :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download