Fromat a TextField as soon as it's written to

Question

I am trying to update a TextField as soon as the user types something in. I like to avoid people writing in different text formats but have the proper capitlisation eg. instead of jOHN or JOHN or john, the Text needs to be updated (firstCapitalLetter) John in this case.

I tried to copy the method as described here: Format input text to uppercase but I am failing to adapt it to my case. The txtFirstName is the ID of the TextField.

NWF$(document).ready(function () {
NWF$("#" + txtFirstName).change(function () {
    
    // get the text value from the FirstNname textfield
    var textContent = NWF$('#' + txtFirstName).text();

    // check to see if the value is not null
    if (textContent.length > 0) {

        // format the first letter to UpperCase and the rest to LowerCase
        textContent = NWF$("#" + txtFirstName).toUpperCase() + txtFirstName.substr(1).toLowerCase();
        NWF.value = textContent;
    }
  });
});

try to replace this: `.change(function` with `.on('input', function` — n--, Mar 05 '21 at 12:37
what kind of text field? as far as I know any text input types have 'input' event — n--, Mar 05 '21 at 13:03
Tried your suggestion but it does not work... see in the answer, I changed it abit and it works out that way. Maybe you can see what it does as I am not a developer; I just combined by trial & error. — Bucki, Mar 05 '21 at 13:19

score 0 · Answer 1 · answered Mar 05 '21 at 13:18

I managed to get it working, after so many trials.
Now, the txtFirstName changes the format as wanted :)

NWF$(document).ready(function () {
NWF$("#" + txtFirstName).change(function () {
    
    // get the text value from the FirstNname textfield
    var textContent = this.value;

    // check to see if the value is not null
    if (textContent.length > 0) {

        // format the first letter to UpperCase and the rest to LowerCase
        textContent = textContent[0].toUpperCase() + textContent.substr(1).toLowerCase();
        this.value = textContent;
    }   
});

});

score 0 · Answer 2 · answered Mar 05 '21 at 15:02

Here is another option if you have to update two seperate txtFields.
Maybe one of you can propose a better approach on this.

Basically, I wanted to say, when the the txtFields are updated then they need to be formatted to the proper capitalisation to avoid things like: john / JOHN / jOHn

NWF$(document).ready(function () {
    NWF$("#" + txtFirstName).change(function () {
        
        // get the text value from the FirstNname textfield
        var textContent = this.value; //alert(textContent)
    
        // check to see if the value is not null
        if (textContent.length > 0) {

            // format the first letter to UpperCase and the rest to LowerCase
            textContent = textContent[0].toUpperCase() + textContent.substr(1).toLowerCase();
            this.value = textContent;
        }   
    });

    NWF$("#" + txtLastName).change(function () {
        
        // get the text value from the FirstNname textfield
        var textContent = this.value; //alert(textContent)
    
        // check to see if the value is not null
        if (textContent.length > 0) {

            // format the first letter to UpperCase and the rest to LowerCase
            textContent = textContent[0].toUpperCase() + textContent.substr(1).toLowerCase();
            this.value = textContent;
        }   
    });
    
});

Fromat a TextField as soon as it's written to

2 Answers2