Find The First Character Of Input In A Textbox

I am stuck in implementing the following: User starts typing in a textbox. The javascript on page captures the first character typed, validates that it is an english alphabet (a-z

Solution 1:

Something like this should work:

HTML:

<inputtype="text"id="myField" />

And in JS:

window.onload = function() {
    document.getElementById('myField').onkeyup = function() {
        // Validate that the first letter is A-Za-z and capture itvar letter = this.value.match(/^([A-Za-z])/);

        // If a letter was foundif(letter !== null) {
            // Change it to lowercase and update the value
            letter = letter[0].toLowerCase();
            this.value = letter + this.value.substring(1);

            // Do the request
        }
    }
}

My vanilla-JS skills are a bit rusty but this should do the trick. Just for the heck of it, here's the same using jQuery:

$(function() {
    $('#myField').keyup(function() {
        var letter = $(this).val().match(/^([A-Za-z])/);

        // If a letter was foundif(letter !== null) {
            // Change it to lowercase and update the value
            letter = letter[0].toLowerCase();
            $(this).val(letter + $(this).val().substring(1);

            // Do the request
        }
    });
});

Solution 2:

What part of the problem do you not know how to do? Here's an approach that you can follow. Very likely to need adjustments, but a good starting point

if our text field's id is 'txt'

document.getElementByID('txt').onkeypress = function(e) {
  var textInField = this.value;
  if (textInField.length == 1) {
    var firstChar = textInField.charAt(0);
    if (/[a-zA-Z]/.test(firstChar)) {
      sendXHR(textInField.value.toLowerCase())
    }
  } else {
    // What do you do if there is one or more chars???
  }
}

Note that the other answers here mention onchange, that doesn't fire until the focus leaves the field, which I don't think is what you want