Question

当我的2个变量分别有3个和5个字符时，我有一个删除按钮“禁用”的脚本。

但是当我删除我的字符时，它不会倒数，并再次将“禁用”attr添加到我的按钮。我不知道该怎么做。有什么建议吗？

HTML

<form action="" method="" class="login">
    <ul class="userLogin">
        <li>
            <input type="text" placeholder="E-mail" class="user" />
        </li>
        <li>
            <input type="password" placeholder="Senha" class="pass" />
         </li>
       </ul>
    <button disabled />test</button>
</form>

JS

$(function () {
    var user = 0;
    var pass = 0;

    function userPassAlert() {
        if (user >= 3 && pass >=5) {
            $('button').removeClass('disabled').addClass('available').removeAttr("disabled");
        } else {
            $('button').removeClass('available').addClass('disabled').attr("disabled");
        }
    };

    $(".user").on('focus keypress', function() {
        user++;
        console.log(user);
        userPassAlert();
    });
    $(".pass").on('focus keypress', function() {
        pass++;
        console.log(pass);
        userPassAlert()
    });

    $('button').on('click', function (e) {
        e.preventDefault();
        if (user >= 3 && pass >=5) {
            alert("done");
        }
        else {
           return false; 
        }
    });
});

Answer 1

即使您删除了某个字符，也会在每次按键时递增user和pass。一世而是检查方法userPassAlert()中字段中值的长度：

function userPassAlert() {
    if ($('.user').val().length >= 3 && $('.pass').val().length >=5) {
        $('button').removeClass('disabled').addClass('available').prop("disabled", false);
    } else {
        $('button').removeClass('available').addClass('disabled').prop("disabled", true);
    }
};

Answer 2

三件事：

要将“已禁用”属性添加回按钮，必须按原样添加：

$(".this").attr("disabled","disabled");
当鼠标点击或按键时，计数器总是添加到用户/通行证，因此它总是会上升而且永不停机。如果我们更改此项以在有鼠标或键操作时检查输入中值的长度，它将验证输入字段中存在的实际长度。您可以使用以下方法执行此操作：

user=$(".user").val().length;
Keyup处理退格键比按键更好。在“开启”功能中替换它将提供更准确的结果。

JS Fiddle Here

我删除字符时重新计算var

2 个答案: