Сценарий не работает, если он неуместен в jQuery

Question

Я создам сайт с подтверждением в поле ввода, я использовал Mottie Keyboard в каждом поле ввода, и я использую проверку на нем. я создам кнопку отключения, когда проверка неверна. И у меня есть сценарий для него, непосредственно с клавиатуры gott. Я хочу, чтобы проверка правильности была неправильной, поэтому кнопка на виртуальной клавиатуре не может быть нажата. Вот сценарий:

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() { 

    // 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; 
     } 
    } 

Я хочу отключить кнопку забоя, если проверка не была правильной, поэтому я добавил скрипт. И вот так:

$(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; 
     } 
    } 

это не работает, и я пытаюсь поместить код, который я получаю в верхней части моего кода. это работает, но кнопка «назад» не может быть нажата с самого начала. Кто-нибудь может это исправить?

Вот моя скрипка: DEMO

Answer 1

Я изменил свой код, чтобы обновить fiddle here: вы хотели

отключить кнопку Backspace, если проверка не была правильной

так вот что я :

1. я переименовал toggleKeysIfEmpty в toggleBackspaceKey и изменил ее реализацию, чтобы добавить классы CSS, чтобы сделать кнопку правильно в зависимости от желаемого состояния:

   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. Я изменил реализация обработчика bksp keyaction, чтобы гарантировать, что если это вызывается, когда кнопка отключена, никакое действие не выполняется. Обработчик для backspace будет вызываться, если вы нажмете соответствующую клавишу, или если вы дважды щелкните по кнопке backspace на клавиатуре, даже если она отключена (это может быть ошибка). Вот код обработчика: если кнопка backspace включена, она просто вызывает обработчик обработки backspace по умолчанию. Кроме того, эта функция вызывается один раз из visible обратного вызова:

   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); } };

С учетом этих изменений в месте, кнопка Backspace отключается, если вход пуст или если проверка не пройдена, в данном случае, хотя , как пользователь мог бы очистить содержимое ввода?