2015-05-11 14 views
5

Ich habe diese Knockout benutzerdefinierte Bindung, um ein Textfeld zu validieren, nur englische Buchstaben enthalten. Aber es scheint, als ob Javascript String.fromCharCode falsche Werte zurückgibt.Javascript String.fromCharCode gibt falsche Werte zurück

Zum Beispiel des hebräische Buchstabe „ש“ kehrt als die englischen Buchstaben „A“ und die Zahl „1“ von dem rechten Ziffernblock hat kehrt als „a“ ...

Hier meine Knockout Bindung:

var arrValidKeys = [8, 16, 17, 20, 35, 36, 37, 39, 46]; 
    ko.bindingHandlers.validateText = { 
     init: function (element, valueAccessor) { 
      $(element).on("keydown", function (event) { 

       //Regex pattern: allow only (A to Z uppercase, a to z lowercase) 
       var englishAlphabet = /[A-Za-z]/g; 

       // Retrieving the key from the char code passed in event.which 
       var key = String.fromCharCode(event.which); 

       // keyCodes list: http://stackoverflow.com/a/3781360/114029 
       // check that the key is valid with the above Regex 
       valueAccessor()($(this).val()); 

       return ((jQuery.inArray(event.keyCode, arrValidKeys) != -1) || englishAlphabet.test(key)); 
      }); 

      $(element).on("keyup", function (event) { 

       //Regex pattern: allow only (A to Z uppercase, a to z lowercase) 
       var englishAlphabet = /[A-Za-z]/g; 

       // Retrieving the key from the char code passed in event.which 
       var key = String.fromCharCode(event.which); 

       // keyCodes list: http://stackoverflow.com/a/3781360/114029 
       // check that the key is valid with the above Regex 

       valueAccessor()($(this).val()); 

       return ((jQuery.inArray(event.keyCode, arrValidKeys) != -1) || englishAlphabet.test(key)); 
      }); 

      $(element).on("paste", function (e) { 
       var englishAlphabet = /[A-Za-z]/g; 
       if (englishAlphabet.test($(this).val())) 
        valueAccessor()($(this).val()); 
       else 
        e.preventDefault(); 
      }); 
     } 
    }; 
+0

'event.keyCode' und' event.which' sind die gleiche Sache in jQuery - beste zu verwenden oder das andere. Die Verwendung beider kann verwirrend sein. –

+0

Etwas, das uns helfen könnte, ist ein Kinderspiel :) –

+0

Ich arbeite an einem jsfiddle für Sie :) –

Antwort

0

nach @Jeanluca Scaljeri Vorschlag für diesen Beitrag: Get Correct keyCode for keypad(numpad) keys

ich meinen Code auf diese aktualisiert:

// keyCodes list: https://stackoverflow.com/a/3781360/114029 
var arrValidKeys = [8, /*backspace*/ 
        16, /*shift*/ 
        17, /*ctrl*/ 
        20, /*caps lock*/ 
        35, /*end*/ 
        36, /*home*/ 
        37, /*left arrow*/ 
        39, /*right arrow*/ 
        46, /*delete*/]; 

function validateChar(keyCode) { 
    //Regex pattern: allow only (A to Z uppercase, a to z lowercase) 
    var englishAlphabet = /[A-Za-z]/g; 

    //Retrieving the key from the char code passed in event.which 
    var key = String.fromCharCode(keyCode); 

    //Check that the key is valid with the above Regex 
    return ((jQuery.inArray(keyCode, arrValidKeys) != -1) ||  englishAlphabet.test(key)); 
} 

ko.bindingHandlers.validateText = { 
    init: function (element, valueAccessor) { 
     $(element).on("keypress", function (event) { 
      valueAccessor()($(this).val()); 
      return validateChar(event.which); 
     }); 

     $(element).on("keydown", function (event) { 
      valueAccessor()($(this).val()); 
      return validateChar(event.which); 
     }); 

     $(element).on("keyup", function (event) { 
      valueAccessor()($(this).val()); 
      return validateChar(event.which); 
     }); 

     $(element).on("paste", function (e) { 
      var englishAlphabet = /^[A-Za-z]+$/g; 
      var text = e.originalEvent.clipboardData.getData('Text'); 
      if (!englishAlphabet.test(text)) 
       e.preventDefault(); 
     }); 
    } 
}; 

Der Grund, warum ich alle drei Ereignisse hinzugefügt haben (keypress, keydown und keyup) ist, dass keypress allein wird nicht ausgelöst, wenn die Rücktaste drücken, und ich brauche es beobachtbare ein Etikett mit Knockout zu aktualisieren.

Und hier ist ein Arbeits jsfiddle Link: https://jsfiddle.net/2ma9nhn7/6/

+0

Bedeutet das, dass deine Probleme gelöst sind? –

+0

In Bezug auf diese Frage, ja, und vielen Dank für Ihre Hilfe :-) obwohl es aussieht wie ein bisschen übertrieben, um 3 Ereignisse für diese Aufgabe zu behandeln ... –

+0

Ich denke du hast Recht. Aber ich fürchte, es gibt keine anderen Möglichkeiten. –

Verwandte Themen