Javascript function: All caps after comma

JavaScript
1

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

Try the code below, i haven’t tested it but it should work

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

I’d convert the value onkeyup and onchange:

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 
<!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

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

I agree. A much easier and reliable solution is to perform the update when they leave the field, such as in this example here.


<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>