Question

目前我正在配置带验证的表单。一切顺利。但是当用户输入@符号时，我试图让CSS改变。此时，当用户键入多于4个字符时，CSS会更改，使用以下代码：

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if (count >= 4) {
            $('#Emailinput').css({
                'border-color': '#c1c1c1',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

现在我想在输入@符号时将count更改为一个事件。我看到的每个地方都找到了这段代码：

if ($('#email').val().indexOf('@') > -1) {

所以我将代码更改为：

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if ($('#Emailinput').val().indexOf('@') > -1) {
            $('#Emailinput').css({
                'border-color': '#c1c1c1',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

任何帮助，以便在键入@符号时更改CSS？我将找到的代码放在正确的位置了吗？任何帮助，将不胜感激。

Answer 1

我认为您的代码已经正常运行，see it here

JS

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if ($('#Emailinput').val().indexOf('@') > -1) {
            $('#Emailinput').css({
                'border-color': 'green',
                'border-width': '5px',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

如果@符号是键入的更改CSS，则进行表单验证

1 个答案: