Capture * all * display-characters in JavaScript?

Question

Recently I was given an unusual request that I have the most difficult time for addressing, which involves capturing all the displayed characters when entering into a text field. The installation is as follows:

I have a text box that has a maximum length of 10 characters. When a user tries to type more than 10 characters, I need to notify the user that he is printing out of the allowed number of characters.

The simplest solution would be to specify a maxlength of 11, check the length for each keyword and trim to 10 characters, but this solution looks a bit silly. I would prefer to capture the character before keyup and, depending on whether it is a displayable character, present a notification to the user and prevent the default action.

Whitelisting will be problematic as we process a lot of international data.

I played with every combination of keystrokes , keystrokes and keystrokes , reading event.keyCode , an event. charCode and event.which , but I can not find a single combination that would work in all browsers. The best I could do is the following, which works correctly in> = IE6, Chrome5, FF3.6, but does not work in Opera:

NOTE . The following code uses 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 admit that what I am doing is probably overly designed the solution, but now that I have invested in it, I would like to know about the solution.

Answer 1

11, 10 , .

/, , - / .. , .

maxlength 10, , , ? , , , , .

<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>

Answer 2

JQuery , .validate() . maxlength , . .

$("form[name='myform']").validate({
    rules: {
        myfield: {required:true, maxlength:10}
    }
});

Answer 3

, -, , , , .

, , , setTimeout . , ( , ~ 400 ).

, (key-down, on-change .. ..).

, , .

, , . , .

.

, . , , - .

Answer 4

, , ? onsubmit, . , .

, , , ( ).

Alternatively, if this happens in real time, bind the logic to the variable set by the key-up event. If the length limit is exceeded, enter an error message, do not trim or update the private variable.