使用javascript创建输入字段

Creating a input field using javascript

本文关键字：字段 输入 创建 javascript 使用      更新时间：2023-09-26

我目前在html文件中设置了两个按钮。

<div class="login-register">
            <button type="button" id="login" onclick="login()">Login</button>
            <button type="button" id="register">Register</button>
</div><!-- end of login-register -->

我想将javascript与这些按钮结合使用，以便在单击登录时使用。则按钮被隐藏并且2个输入字段例如

<input id="username" type="text" name="username" placeholder="Username">
<input id="password" type="text" name="password" placeholder="Password">

出现。我正在使用一个内部脚本标签，到目前为止我所拥有的只是

$("#login").click(function(){
        var usernameInputField = document.createElement("login");
        usernameInputField.setAttribute('type', 'text');
        usernameInputField.setAttribute('placeholder', 'Username');
        usernameInputField.setAttribute('name', 'username');
    })

我不确定这是否是一个好的做法，或者是否有另一种首选的设置方式。

如果您想要纯JavaScript，我建议您只操作样式。

它看起来像这个

YourElement.style.visibility = "hidden";

这是最佳实践吗？我想这完全取决于你的申请。但在这样一件简单的事情中，它运行良好。

总是有可能替换内部html或整个div。

例如

$("#login").on('click',function(){
     $('.login-register').html('<input id="username" type="text" name="username" placeholder="Username"><input id="password" type="text" name="password" placeholder="Password">');
});

不过，您的密码输入应该是password 类型

    $("#login").click(function(){
        document.getElementById("login-register").style.visibility = "hidden";
        document.getElementById("username-password").style.visibility = "visible";
    })
相关文章：