Question

I have a form field for entering a user id. The user id is always 6 characters so the field is limited to a maxlength of 6 characters.

The field has an onkeyup() event to call a function that looks up the user id and fills in several other form fields if the user id is valid. Most people I know have used onblur() for something like this but I never liked how a user has to tab to or click on another field before the autofilling AJAX goes off.

The function right now will return w/o doing anything if the field length is < 6 characters or if the key that was pressed is a left or right cursor field.

There’s one flaw left I haven’t been able to think around. Since the field is limited to 6 characters, if 6 characters are already entered and another key is pressed, the value of the field will not change but the function will fire and validate the field (un-necessary validation/db-query).

Is there anyway to prevent the function from going off in this case? I’m thinking it’s not possible but wanted to check. I had a thought if the field length was 6 I could check the last key pressed against the 6th character of the field, but if someone typed something like ‘a’ as the 6th character and then ‘a’ again, it wouldn’t work. I guess that could eliminate all possibilities except for the one case though one case (not perfect but better).

(rails) <%= f.text_field :uid, :size => 10, :maxlength => 6, :class => 'validate_text', :onkeyup => uid_lookup (event)', :autocomplete => :off   %>

<script type="text/javascript">
    String.prototype.trim = function() {
      return this.replace(/^\s+|\s+$/g,"");
    }
</script>
<script type="text/javascript">
        uid_lookup = function(e){
        var unicode=e.keyCode? e.keyCode : e.charCode;
        if (unicode == 37 || unicode == 39) {    // ignore a left or right arrow press
            return
        }

        var uid= $('uid').value;
        uid = uid.trim();
        $('uid).value = uid;   //uid's have no spaces, go ahead and remove if typed
        if (uid.length != 6) {
            return
        }
        // db lookup & form autofill

        }
</script>       

Answer 1

The solution is not to use onkeyup. The correct event to use is HTML5’s oninput, which is supported by almost every major browser out there. The one browser lacking support is—of course—Internet Explorer 8, but we can emulate the event using IE’s proprietary onpropertychange event which will fire whenever an input element’s value property changes.

I’m not familiar with rails, but the best way to apply the event is using JavaScript so that you can gracefully degrade if oninput isn’t supported:

var el = document.getElementById("myEl");

// Check support
if ("onpropertychange" in el && !("oninput" in el)) {
    el.onpropertychange = function () {
        if (event.propertyName == "value")
            uuid_lookup.call(this, event);
    }
}
else
    el.oninput = uuid_lookup;

The other great thing about this event is that it only fires when the value changes – much like onchange but more real-time. This means you can do away with your key detection for left and right arrows in the uuid_lookup function.