gpt4 book ai didi

javascript - 如果在 jQuery 中放错位置,脚本将无法工作

转载 作者:行者123 更新时间:2023-12-03 06:01:18 24 4
gpt4 key购买 nike

我将创建在输入字段中进行验证的网站,我在每个输入字段中使用了 Mottie 键盘,并且对其进行了验证。当验证不正确时,我将创建禁用按钮。我直接从 github 页面 mottie 键盘获取了一个脚本。我想要的是,如果验证不正确,则无法按下虚拟键盘中的按钮。这是脚本:

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

它不起作用,我尝试将我得到的代码放在我的代码的顶部。它可以工作,但不能从一开始就按下退格按钮。有谁能解决吗?

这是我的 fiddle :DEMO

最佳答案

我已更改您的代码以更新 fiddle here : 你想要

disable backspace button if validation was not correct

这就是我所做的:

  1. 我重命名为toggleKeysIfEmptytoggleBackspaceKey并更改其实现以添加 CSS 类以根据所需状态正确呈现按钮:

    var toggleBackspaceKey = function( kb, toggle ) {<br/>
    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 处理程序,以确保如果在禁用按钮时调用它,则不会执行任何操作。如果您按下相应的键或者双击键盘中的退格按钮,即使它被禁用(这可能是一个错误),也会调用退格的处理程序。这是处理程序代码:如果启用了退格按钮,它只会调用默认的退格处理处理程序。此外,此函数从 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;
    }<br/>
    return originalBkSpaceHandler.apply(kb, arguments);
    }
    };

完成这些更改后,如果输入为空或验证失败,则禁用退格按钮,但在这种情况下,用户将如何清除输入的内容?

关于javascript - 如果在 jQuery 中放错位置,脚本将无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39740099/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com