当某些输入为空时创建另一个按钮

Create another button when certain input is empty

本文关键字：创建 另一个 按钮 输入      更新时间：2023-09-26

我正在尝试为用户名和密码制作登录表单，但我希望它像这样工作：当用户单击登录按钮而至少有一个输入字段为空时，登录按钮必须缩小（向左）到其原始宽度的 50%，另一个按钮必须出现在它的右侧（大小等于另一个按钮）。第二个按钮显示注册。

<div class="login">
        <input type="text" placeholder="username" name="user"><br>
        <input type="password" placeholder="password" name="password"><br>
        <input type="button" value="Login">
       (<input type="button" value="Register"> this is what has to appear)
</div>
在 CSS 中为您的按钮创建 3 个类：1 个用于大按钮，一个

用于半大小按钮，一个用于隐藏按钮。 为您的登录名提供 HTML 中的大按钮类，为您的注册按钮提供隐藏类。然后也给你的按钮 ID。单击按钮时，可以检查文本框的值并将其与空字符串 （"） 进行比较，然后可以将按钮的类更改为半大小的按钮类。有关 JavaScript 和 CSS on w3schools.com 的更多信息和代码示例

这应该可以完成这项工作：

<div class="login">
    <input type="text" placeholder="username" id="user">
    <br>
    <input type="password" placeholder="password" id="password">
    <br>
    <input type="button" value="Login" id="login" style="width:150">   
    <input type="button" value="Register" hidden="true" id="register">
</div>
<script type="text/javascript">
    login = document.getElementById('login');
    login.addEventListener("click",hide,false);
    function hide()
    {
        user = document.getElementById('user');
        password = document.getElementById('password');
        if(!user.value || !password.value)
        {
            register = document.getElementById('register');
            register.hidden=false;
            current_width = parseInt(login.style.width);
            login.style.width = current_width/2+'px';
            register.style.width = current_width/2+'px';
        }
    }
</script>
相关文章：