I'd like to know how to do the following with Jquery:

I have 1 textfield in a form. Whenever the first character is a number, change the attr name of this field to 'number'. If the first character is a letter, change this attr name to 'letter'.

!! This also has to work when a number or text is copy-pasted into the field.

Thanks! Jeroen

I'd like to know how to do the following with Jquery:

I have 1 textfield in a form. Whenever the first character is a number, change the attr name of this field to 'number'. If the first character is a letter, change this attr name to 'letter'.

!! This also has to work when a number or text is copy-pasted into the field.

Thanks! Jeroen

• javascript
• jquery
• forms

Share Improve this question Follow asked Dec 10, 2011 at 13:39 JroenJroen 47211 gold badge66 silver badges1717 bronze badges 4

• 2 Does this have to happen as you type (more plicated), or when the onchange attribute fires (easy)? – Michael Berkowski Commented Dec 10, 2011 at 13:41
• 2 That reads more like a freelancer spec than a question for SO. – Tak Commented Dec 10, 2011 at 13:42
• Does copy-pasting also count as typing? – Jroen Commented Dec 10, 2011 at 13:45
• @Jroen - You tell us, it's your question and your requirement. (Is this homework?) But you can paste with the keyboard or the mouse, so in my opinion it's not typing but is "editing". – nnnnnn Commented Dec 10, 2011 at 14:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Bind (some) event(s) to the text field: The keyup event is used to update the name attribute when the user modifies the text (including shortcut CTRL+V copy-pasting),
the paste and mousemove events are used to deal with copy-pasting (dragging, contextmenu).

$("#your-input").bind("keyup paste mousemove", function() {
    var char = this.value.charAt(0);     // Use vanilla JavaScript to get the
                                         // first character of the text field
    if (/[0-9]/.test(char)) {            // Test against a pattern: digit
        $(this).attr("name ", "number");
    } else if (/[a-zA-Z]/.test(char)) {  // Else, pattern: letters
        $(this).attr("name", "letter");
    } else {                             // Finally, no name?
        $(this).attr("name", "");
    }
});

Remove else {...}, and replace else if(/[a-zA-Z]/.test(char)) { with else { if you want the default name to be letter.

Something like this:

$("#yourformid").submit(function(){
   var input = $("#yourinputid"),
       val = input.val();
   input.attr("name", /^\d/.test(val) ? "number" :
                      /^[A-Z]/i.test(val) ? "letter" : "");
});

It's difficult to handle paste in all browsers, but if you just set the attribute when the form is submitted you're covered no matter what the user does including drag'n'drop changes to the field. (Obviously I'm assuming it doesn't matter what the attribute is before submit.)