无法在html文本框中输入文本

问题描述 投票：0回答：2

我有使用 HTML 创建的输入字段，当我运行页面时，我无法在文本框中输入数据。我尝试了disabled=false，但没有成功。我遇到问题的输入字段是电子邮件和密码。我还将输入字段放入表单中。我还将输入文本框放置在 div 内。这会影响程序吗？请帮忙。谢谢。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu,
        #footer-menu {

            
            text-align: center;
            
        }

        

        nav {

            margin: auto;

            line-height: 60px;
        }

        header {
            margin: -8px;
            position: sticky;
            top: 0;
            height: 75px;
            background-color: antiquewhite;
        }

        

        a {
            margin: auto;
            text-decoration: none;
            font-size: 24px;
            color: black;
        }


        footer {
            position: absolute;
            bottom: 0;
            height: 75px;
            width: 100%;
            background-color: antiquewhite;
        }

        div#center {
            text-align: center;
           
        }


        input {
            margin: .1rem;
           
        }

        #label {
            position: relative;
            top: 73px;
            left: 35%;
                   }

        div#label {
            margin-top: .7rem;
            font-weight: bold;
            padding-top: .9rem;
            font-size: 18px;
        }

        h2 {
            text-align: center;
        }

     

        #register {
            display: inline;
            color: blue;
            text-decoration: underline;
        }

        #logbtn {
            position: absolute;
            width: 75px;
            height: 25px;
            background-color: green;
            display: inline;
            border-radius: 5px;
            left: 51%;
            color: white;
        }

        input[type=submit] {
            position: absolute;
            width: 75px;
            height: 25px;
            background-color: green;
            display: inline;
            border-radius: 5px;
            left: 51%;
            color: white;
        }

        #account {
            text-align: center;
            color: blue;
            text-decoration: underline;
        }

        #logo {
            float: left;
        }
    </style>

</head>

<body>
    <header><img src="logo.jpg" style="height: 75px; width: 75px;" id="logo">

        <div id="menu">
            <nav>
                <a href="index.html">Home|</a>
                <a href="math-facts.html">Games|</a>
                <a href="about.html">About|</a>
                <a href="login.html">Login</a>


            </nav>
        </div>

    </header>
    <form id="forma">
        <h2 id="h2">Log in</h2>
        <div id="label">
            <div>Email:</div>
            <div>Password:</div>

            <p id="register">Need an account? Register</p>

        </div>
        <!-- <form id="forma"> -->
        <div id="center">

            <!-- <label for="email">Email:</label> -->
            <input name="email" type="email" id="email"><br>

            <!-- <label for="password">Password:</label> -->
            <input type="password" id="password"><br><br>

            <input type="submit" value="Log in" id="sublogin"><br>
        </div>
    </form>

    <form id="formb">
        <h2 id="h2">Register</h2>
        <div id="label">
            <div>Email:</div>
            <div>Password:</div>
            <div>Repeat Password:</div>



        </div>



        <div id="center">

            <!-- <label for="email">Email:</label> -->
            <input name="email" type="email" id="email"><br>

            <!-- <label for="password">Password:</label> -->
            <input type="password" id="password"><br>

            <!-- <label for="password2">Repeat Password:</label> -->
            <input type="password" id="password2" name="password2"><br>



            <input type="checkbox" id="over"><label for="over">I am over 13 and like playing games.</label><br><br>

            <input type="submit" value="Register" id="subregister"><br>
        </div>
        <p id="account">Have an account? Log in</p>
    </form>





    <footer>
        <hr>
        <div id="footer-menu">
            <nav>
                <a href="contact-us.html"><img src="icon-contact-us.png"></a>
                <a href="https://instagram.com"><img src="icon-instagram.png"></a>
                <a href="https://twitter.com"><img src="icon-twitter.png"></a>
                <a href="https://facebook.com"><img src="icon-facebook.png"></a>


            </nav>
        </div>
    </footer>

    <script>

        window.addEventListener("load", function () { document.getElementById("formb").style.display = "none" });
        const register = document.getElementById("register");
        const login = document.getElementById("forma")
        register.addEventListener("click", function () {
            document.getElementById("forma").style.display = "none";
            document.getElementById("formb").style.display = "block";

        });


        const account = document.getElementById("account");
        account.addEventListener("click", function () {
            document.getElementById("formb").style.display = "none";
            document.getElementById("forma").style.display = "block";
        });

        const sublogin = document.getElementById("sublogin");
        sublogin.addEventListener("click", function () {
            alert("Form submitted")
        })

        const subregister = document.getElementById("subregister");
        subregister.addEventListener("click", function () {
            alert("Form submitted")
        })

        document.getElementById("forma").setAttribute("disabled", false);
          
    </script>




</body>

</html>
javascript html textbox
2个回答
0
投票

您已将标签放置在输入上方。这是一个快速修复：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu,
        #footer-menu {

            
            text-align: center;
            
        }

        

        nav {

            margin: auto;

            line-height: 60px;
        }

        header {
            margin: -8px;
            position: sticky;
            top: 0;
            height: 75px;
            background-color: antiquewhite;
        }

        

        a {
            margin: auto;
            text-decoration: none;
            font-size: 24px;
            color: black;
        }


        footer {
            position: absolute;
            bottom: 0;
            height: 75px;
            width: 100%;
            background-color: antiquewhite;
        }

        div#center {
            text-align: center;
           
        }


        input {
            margin: .1rem;
           
        }

        #label {
            position: relative;
            top: 73px;
            left: 0%;
            width: 30%;
                   }

        div#label {
            margin-top: .7rem;
            font-weight: bold;
            padding-top: .9rem;
            font-size: 18px;
        }

        h2 {
            text-align: center;
        }

     

        #register {
            display: inline;
            color: blue;
            text-decoration: underline;
        }

        #logbtn {
            position: absolute;
            width: 75px;
            height: 25px;
            background-color: green;
            display: inline;
            border-radius: 5px;
            left: 51%;
            color: white;
        }

        input[type=submit] {
            position: absolute;
            width: 75px;
            height: 25px;
            background-color: green;
            display: inline;
            border-radius: 5px;
            left: 51%;
            color: white;
        }

        #account {
            text-align: center;
            color: blue;
            text-decoration: underline;
        }

        #logo {
            float: left;
        }
    </style>

</head>

<body>
    <header><img src="logo.jpg" style="height: 75px; width: 75px;" id="logo">

        <div id="menu">
            <nav>
                <a href="index.html">Home|</a>
                <a href="math-facts.html">Games|</a>
                <a href="about.html">About|</a>
                <a href="login.html">Login</a>


            </nav>
        </div>

    </header>
    <form id="forma">
        <h2 id="h2">Log in</h2>
        <div id="label">
            <div>Email:</div>
            <div>Password:</div>

            <p id="register">Need an account? Register</p>

        </div>
        <!-- <form id="forma"> -->
        <div id="center">

            <!-- <label for="email">Email:</label> -->
            <input name="email" type="email" id="email"><br>

            <!-- <label for="password">Password:</label> -->
            <input type="password" id="password"><br><br>

            <input type="submit" value="Log in" id="sublogin"><br>
        </div>
    </form>

    <form id="formb">
        <h2 id="h2">Register</h2>
        <div id="label">
            <div>Email:</div>
            <div>Password:</div>
            <div>Repeat Password:</div>



        </div>



        <div id="center">

            <!-- <label for="email">Email:</label> -->
            <input name="email" type="email" id="email"><br>

            <!-- <label for="password">Password:</label> -->
            <input type="password" id="password"><br>

            <!-- <label for="password2">Repeat Password:</label> -->
            <input type="password" id="password2" name="password2"><br>



            <input type="checkbox" id="over"><label for="over">I am over 13 and like playing games.</label><br><br>

            <input type="submit" value="Register" id="subregister"><br>
        </div>
        <p id="account">Have an account? Log in</p>
    </form>





    <footer>
        <hr>
        <div id="footer-menu">
            <nav>
                <a href="contact-us.html"><img src="icon-contact-us.png"></a>
                <a href="https://instagram.com"><img src="icon-instagram.png"></a>
                <a href="https://twitter.com"><img src="icon-twitter.png"></a>
                <a href="https://facebook.com"><img src="icon-facebook.png"></a>


            </nav>
        </div>
    </footer>

    <script>

        window.addEventListener("load", function () { document.getElementById("formb").style.display = "none" });
        const register = document.getElementById("register");
        const login = document.getElementById("forma")
        register.addEventListener("click", function () {
            document.getElementById("forma").style.display = "none";
            document.getElementById("formb").style.display = "block";

        });


        const account = document.getElementById("account");
        account.addEventListener("click", function () {
            document.getElementById("formb").style.display = "none";
            document.getElementById("forma").style.display = "block";
        });

        const sublogin = document.getElementById("sublogin");
        sublogin.addEventListener("click", function () {
            alert("Form submitted")
        })

        const subregister = document.getElementById("subregister");
        subregister.addEventListener("click", function () {
            alert("Form submitted")
        })

        document.getElementById("forma").setAttribute("disabled", false);
          
    </script>




</body>

</html>

这是我改变的：

            #label {
                position: relative;
                top: 73px;
                left: 0%;
                width: 30%;
            }

我已将 

left
更改为将其移至最左侧位置，并将 
width
减少为 
30%
。您当然可以进一步调整，但这应该是一个好的开始。

0
投票

您的文本输入似乎完全被标签覆盖，这就是您无法单击和编辑值的原因。使用Chrome开发者工具可以看到： [![开发者工具页面截图][1]][1]

解决此问题的一种方法是删除 id="label" 的 div 并取消注释表单内的标签。 [1]：https://i.sstatic.net/JpDolue2.png

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.