SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript function: All caps after comma

    I am trying to create a function that onkeydown(), forces all letters to be capitalized after a comma (",") in a text input field.

    I know that I can make all of the letters capital using this function:

    function makeUppercase(field) {
    field.value = field.value.toUpperCase();
    }

    But am not sure how to say to do this function only after a comma is present.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try the code below, i haven't tested it but it should work

    Code JavaScript:
    function makeUppercase(field) {
        var value = field.value, parts = value.split(',');
     
        for(var i in parts) {
            if (parts[i].substr(1) == ',') {
                parts[i].toUpperCase();
            }
        }
     
        field.value = parts.join('');
    }

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd convert the value onkeyup and onchange:

    Code:
    inputelement.onkeyup= inputelement.onchange=function(e){
    	e= window.event? event: e;
    	var who= e.target || e.srcElement, text= who.value,
    	i= text.indexOf(',')+1;
    	if(i){
    		who.value= text.substring(0,i)+
    		(text.substring(i)).toUpperCase();
    	}
    	return true;
    }

  4. #4
    Non-Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript">
                function checkStr(obj){
                    var strIn = obj.value;
                    var strOut = '';
                    var foundComma = false;
                    for(i=0; i < strIn.length; i++){
                        if(strIn.charAt(i) == ',') {
                            foundComma = true;
                        }
                        strOut += (foundComma)? strIn.charAt(i).toUpperCase() : strIn.charAt(i);
                    }
                    obj.value = strOut;
                }
            </script>
        </head>
        <body>
            <div>
                <input type="text" name="inpTxt" onkeyup="checkStr(this)" />
            </div>
        </body>
    </html>

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    the problem with manipulating the whole inserted so far string on each key press is it messes with the cursor position (in at least some, if not all, browsers). e.g. if someone types the following into a text field whose text is being changed as a whole on an ongoing basis (where | represents the text cursor):

    123678|

    then moves their cursor back once and proceeds to type from then on to try and insert text, this happens (which is *very* *very* (as in unacceptable imo) anoying):

    123|678

    1234678|

    12346785|

    you can start to try and control the cursor position but this is either hard or impossible (at least correctly in all main browsers) -- that's what i found anyway.


    so unpleasant issues can easily occur with this kind of thing when the user does other things that just typing sequentially (pasting, cursor position changing, selecting ...)

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by johnyboy View Post
    the problem with manipulating the whole inserted so far string on each key press is it messes with the cursor position
    I agree. A much easier and reliable solution is to perform the update when they leave the field, such as in this example here.

    Code html4strict:
    <form id="descriptiveIDForForm">
        <input type="text" name="nameOfField">
    </form>
    <script type="text/javascript">
        function uppercaseAfterComma() {
            var str = this.value,
                commaIndex = str.indexOf(',');
            if (commaIndex === -1) {
                return;
            }
            this.value = str.substr(0, commaIndex + 1) + str.substr(commaIndex + 1).toUpperCase();
        }
        var form = document.getElementById('descriptiveIDForForm');
        form.elements.nameOfField.onblur = uppercaseAfterComma;
    </script>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •