10

I want to make the first letter in a text box to be capital but i have no idea on how i can apply it. e.g sitholimela ----> Sitholimela

I want to apply this to a text box.

Thanks for your help.

IT Forward
  • 367
  • 2
  • 7
  • 28

4 Answers4

11

Please try this. It works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Capitalizing first letter in a textbox</title>
  <script type="text/javascript">
  function capitalize(textboxid, str) {
      // string with alteast one character
      if (str && str.length >= 1)
      {       
          var firstChar = str.charAt(0);
          var remainingStr = str.slice(1);
          str = firstChar.toUpperCase() + remainingStr;
      }
      document.getElementById(textboxid).value = str;
  }
  </script>
 <body>
  <form name="myform" method="post">
      <input type="text" id="mytextbox" onkeyup="javascript:capitalize(this.id, this.value);">
  </form>
 </body>
</html>
Naresh Kumar Nakka
  • 500
  • 4
  • 10
  • you don't need `javascript:` in the keyup event, only in `href` of `a` where it needs to be defined as execution code rather than address. – Billy Moon Aug 20 '13 at 13:23
  • Better to keep keyup listener definition with other javascript, and keep HTML clean - makes it easier to maintain. – Billy Moon Aug 20 '13 at 13:23
9

CSS

input[type=text] {
    text-transform: capitalize;
}

This will make the text appear in this way.

DEMO: http://jsfiddle.net/gvee/csC8K/

gvee
  • 16,732
  • 35
  • 50
  • 1
    Just noting that this will do it to each word in the field, e.g. `foo bar` becomes `Foo Bar` and that it does not change the _value_, just how it is displayed. – Paul S. Aug 20 '13 at 12:34
  • 3
    It just shows that it is capitalized but it is not capitalized actually if you fetch the text. – Rahul Desai Sep 18 '14 at 04:33
7

To do this in JavaScript, get the node, and replace it's value with your transformation

var textbox = document.getElementById('myTextboxId');

textbox.value = textbox.value.charAt(0).toUpperCase() + textbox.value.slice(1);

MDN pages

Paul S.
  • 64,864
  • 9
  • 122
  • 138
4

Working demo...

http://jsfiddle.net/billymoon/mzXLc/1/

HTML

<input type="text" id="targetBox">

Javascript

var capitalize = function(e){
    // if the first letter is lowercase a-z
    // ** don't run the replace unless required, to permit selecting of text **
    if(this.value.match(/^[a-z]/)){
        // replace the first letter
        this.value = this.value.replace(/^./,function(letter){
            // with the uppercase version
            return letter.toUpperCase();
        });
    }
}

// listen to key up in case of typeing, or pasting via keyboard
// listen to mouseup in case of pasting via mouse
// prefer `up` events as the action is complete at that point
document.getElementById('targetBox').addEventListener('keyup', capitalize);
document.getElementById('targetBox').addEventListener('mouseup', capitalize);
Billy Moon
  • 57,113
  • 24
  • 136
  • 237
  • like this version because copy paste still allows lowercase characters. But didn't like the behavior when I have a lowercase text. As soon as I click in the textbox the lowercase text changes. If I leave out the mouseup event I have with lowercase text the problem that marking the text and replacing it the old text stays and the new text gets added to the end. – Michael P Oct 23 '20 at 11:22