Question

I was given an unusual request recently that I’m having the most difficult time addressing that involves capturing all display-characters when typed into a text box. The set up is as follows:

I have a text box that has a maxlength of 10 characters. When the user attempts to type more than 10 characters, I need to notify the user that they’re typing beyond the character count limit.

The simplest solution would be to specify a maxlength of 11, test the length on every keyup, and truncate back down to 10 characters but this solution seems a bit kludgy. What I’d prefer to do is capture the character before keyup and, depending on whether or not it is a display-character, present the notification to the user and prevent the default action.

A white-list would be challenging since we handle a lot of international data.

I’ve played around with every combination of keydown, keypress, and keyup, reading event.keyCode, event.charCode, and event.which, but I can’t find a single combination that works across all browsers. The best I could manage is the following that works properly in >=IE6, Chrome5, FF3.6, but fails in Opera:

NOTE: The following code utilizes jQuery.

$(function(){
  $('#textbox').keypress(function(e){
    var $this = $(this);
    var key = ('undefined'==typeof e.which?e.keyCode:e.which);
    if ($this.val().length==($this.attr('maxlength')||10)) {
      switch(key){
        case 13: //return
        case 9:  //tab
        case 27: //escape
        case 8:  //backspace
        case 0:  //other non-alphanumeric
          break;
        default:
          alert('no - '+e.charCode+' - '+e.which+' - '+e.keyCode);
          return false;
      };
    }
  });
});

I’ll grant that what I’m doing is likely over-engineering the solution but now that I’m invested in it, I’d like to know of a solution.

Answer 1

The simplest solution would be to specify a maxlength of 11, test the length on every keyup, and truncate back down to 10 characters but this solution seems a bit kludgy.

It is also easily defeated by cut/paste, drag/drop, right-click-undo/redo, etc. There’s no reliable way to get every potential bit of input short of polling.

Why not set maxlength to 10, to let the browser enforce the limit properly, and just show a warning if there is another attempted keypress? You don’t need to prevent any default action because the browser is already taking care of the length, so the amount of key checking you have to do is lower.

<input id="x" maxlength="10"/>
<div id="x-warning" style="display: none;">can't type any more!</div>
<script type="text/javascript">
    function LengthMonitor(element, warning) {
        element.onkeypress= function(event) {
            if (event===undefined) event= window.event;
            var code= 'charCode' in event? event.charCode : 'which' in event? event.which : event.keyCode;
            var full= element.value.length===element.maxLength;
            var typed= !(code<32 || event.ctrlKey || event.altKey || event.metaKey);
            warning.style.display= (full & typed)? 'block' : 'none';
        };
        element.onblur= function() {
            warning.style.display= 'none';
        };
    }

    LengthMonitor(document.getElementById('x'), document.getElementById('x-warning'));
</script>