Skript funktioniert nicht, wenn in jQuery

Question

verlegt Ich werde Website mit Validierung in Eingabefeld erstellen, ich habe Mottie Keyboard in jedem Eingabefeld verwendet, und ich benutze Validierung auf sie. Ich werde die Schaltfläche deaktivieren, wenn die Validierung nicht korrekt ist. Und ich bekomme ein Skript dafür, direkt von github page mottie keyboard. Ich möchte, wenn die Validierung nicht korrekt war, kann die Schaltfläche in einer virtuellen Tastatur nicht gedrückt werden. Hier ist das Skript:

var toggleKeysIfEmpty = function(kb) { 
      var toggle = kb.$preview.val() === ''; 
      console.log(toggle, kb.$preview.val()); 
      kb.$keyboard 
     .find('.ui-keyboard-bksp') 
     .toggleClass('disabled', toggle) 
     .prop('disabled', toggle); 
}; 

Und das ist mein Skript vor dem Hinzufügen von Skript oben:

$(function() { 

    // change default navigation keys  
    $('#jkeyboard2, #jkeyboard').keyboard({ 
    layout: 'num', 
    // setting alwaysOpen does odd things with input focus on initialization 
    // best to leave it false and focus on the desired input 
    // alwaysOpen: true, 
    autoAccept: true, 
    usePreview: false, 
    position: { 
     of: $(window), 
     // null (attach to input/textarea) or a jQuery object (attach elsewhere) 
     my: 'center bottom', 
     at: 'center bottom', 
     at2: 'center bottom' 
    }, 
    maxLength: 4, 
    layout: 'custom', 
    customLayout: { 
     'normal': ['1 2 3', '4 5 6', '7 8 9', '0 . {b}'], 
    }, 
    visible : function(e, keyboard) { 
     toggleKeysIfEmpty(keyboard); 
    }, 
    tabNavigation: true, 
    initialFocus: false, 
    initialized: function() { 
     setTimeout(function(){ 
      $('#jkeyboard').focus(); 
     }, 200); 
    }, 
    change: function(e, keyboard, el) { 
     if (keyboard.$el.val().length >= 4) { 
     // switchInput(goToNext, isAccepted); 
     keyboard.switchInput(true, true); 
     } else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") { 
     // go to previous if user hits backspace on an empty input 
     keyboard.switchInput(false, true); 
     } 
    } 
    }) 
}); 

$(document).ready(function() { 
     $('#jkeyboard').bind('keyboardChange', function (e, keyboard, el) { 
     if (validatePhone('jkeyboard')) { 
      $('#spnPhoneStatus').html(''); 
      $('#spnPhoneStatus').css('color', 'green'); 
     } else { 
      $('#spnPhoneStatus').html('<b>Wrong Number</b>'); 
      $('#spnPhoneStatus').css('color', 'red'); 
     } 
     }); 
    }); 

    function validatePhone(jkeyboard) { 
     var a = document.getElementById(jkeyboard).value; 
     var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,9})?|3(?:[1238][0-9]{0,9})?|5(?:9[0-9]{0,9})?|7(?:[78][0-9]{0,9})?)?)?)?$/; 
     //var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/; 
     if (filter.test(a)) { 
     return true; 
     } else { 
     return false; 
     } 
    } 

mag ich Rücktaste deaktivieren, wenn die Validierung nicht korrekt war, so dass ich hinzugefügt, um das Skript. Und werden Sie so:

$(function() { 

    // change default navigation keys  
    $('#jkeyboard2, #jkeyboard').keyboard({ 
    layout: 'num', 
    // setting alwaysOpen does odd things with input focus on initialization 
    // best to leave it false and focus on the desired input 
    // alwaysOpen: true, 
    autoAccept: true, 
    usePreview: false, 
    position: { 
     of: $(window), 
     // null (attach to input/textarea) or a jQuery object (attach elsewhere) 
     my: 'center bottom', 
     at: 'center bottom', 
     at2: 'center bottom' 
    }, 
    maxLength: 4, 
    layout: 'custom', 
    customLayout: { 
     'normal': ['1 2 3', '4 5 6', '7 8 9', '0 . {b}'], 
    }, 
    visible : function(e, keyboard) { 
     toggleKeysIfEmpty(keyboard); 
    }, 
    tabNavigation: true, 
    initialFocus: false, 
    initialized: function() { 
     setTimeout(function(){ 
      $('#jkeyboard').focus(); 
     }, 200); 
    }, 
    change: function(e, keyboard, el) { 
     if (keyboard.$el.val().length >= 4) { 
     // switchInput(goToNext, isAccepted); 
     keyboard.switchInput(true, true); 
     } else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") { 
     // go to previous if user hits backspace on an empty input 
     keyboard.switchInput(false, true); 
     } 
    } 
    }) 
}); 

$(document).ready(function() { 
     $('#jkeyboard').bind('keyboardChange', function (e, keyboard, el) { 
     if (validatePhone('jkeyboard')) { 
      $('#spnPhoneStatus').html(''); 
      $('#spnPhoneStatus').css('color', 'green'); 
     } else { 
      $('#spnPhoneStatus').html('<b>Wrong Number</b>'); 
      $('#spnPhoneStatus').css('color', 'red'); 
     var toggleKeysIfEmpty = function(kb) { 
      var toggle = kb.$preview.val() === ''; 
      console.log(toggle, kb.$preview.val()); 
      kb.$keyboard 
     .find('.ui-keyboard-bksp') 
     .toggleClass('disabled', toggle) 
     .prop('disabled', toggle); 
      }; 
     } 
     }); 
    }); 

    function validatePhone(jkeyboard) { 
     var a = document.getElementById(jkeyboard).value; 
     var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,9})?|3(?:[1238][0-9]{0,9})?|5(?:9[0-9]{0,9})?|7(?:[78][0-9]{0,9})?)?)?)?$/; 
     //var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/; 
     if (filter.test(a)) { 
     return true; 
     } else { 
     return false; 
     } 
    } 

es funktioniert nicht, und ich versuche, den Code zu setzen, den ich oben auf meinem Code bekomme. es ist Arbeit, aber Rücktaste kann nicht von Anfang an gedrückt werden. Jeder kann es reparieren?

Hier ist meine Geige: DEMO

Answer 1

ich den Code geändert haben die fiddle here zu aktualisieren: Sie

disable Rücktaste, wenn die Validierung nicht korrekt war

was so hier wollte ich tat:

1. I umbenannt toggleKeysIfEmpty-toggleBackspaceKey und änderte seine Umsetzung der CSS-Klassen hinzuzufügen, die Taste korrekt auf dem gewünschten Zustand abhängig zu machen:

   var toggleBackspaceKey = function(kb, toggle) {
console.log(toggle, kb.$preview.val()); var $bkSpaceBtn = kb.$keyboard.find('.ui-keyboard-bksp'); if (toggle) { $bkSpaceBtn .attr({ 'disabled': 'disabled', 'aria-disabled': 'true' }) .removeClass(kb.options.css.buttonHover) .addClass(kb.options.css.buttonDisabled); } else { $bkSpaceBtn .removeAttr('disabled') .attr({ 'aria-disabled': 'false' }) .addClass(kb.options.css.buttonDefault) .removeClass(kb.options.css.buttonDisabled); } };

2. ich die Umsetzung des bksp keyaction Handler geändert, um sicherzustellen, ob es aufgerufen, wenn die Schaltfläche deaktiviert ist, wird keine Aktion ausgeführt. Der Handler für die Rücktaste wird aufgerufen, wenn Sie die entsprechende Taste drücken oder wenn Sie auf die Rücktaste in der Tastatur doppelklicken, auch wenn sie deaktiviert ist (dies könnte ein Fehler sein). Hier ist der Handler-Code: Wenn der Backspace-Button aktiviert ist, ruft er einfach den Standard-Backspace-Verarbeitungshandler auf. Auch diese Funktion einmal aus dem visible Rückruf aufgerufen wird:

   var processBkSpcKey = function(kb) { var originalBkSpaceHandler = $.keyboard.keyaction.bksp; $.keyboard.keyaction.bksp = function(base) { // If the backspace button is disabled, do not process it. var $bkSpaceBtn = kb.$keyboard.find('.ui-keyboard-bksp'); if($bkSpaceBtn.hasClass(kb.options.css.buttonDisabled)) { return false; }
return originalBkSpaceHandler.apply(kb, arguments); } };

Mit diesen Änderungen an Ort und Stelle ist die Rücktaste deaktiviert, wenn die Eingabe leer ist oder wenn die Überprüfung fehlschlägt, in diesem Fall jedoch , wie würde der Benutzer den Inhalt der Eingabe löschen?