【问题标题】:Html input text can't be edited无法编辑 HTML 输入文本
【发布时间】:2018-06-24 18:42:25
【问题描述】:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                   <title>OrderForm</title>
        <style>
            header{
                background-color:brown;
                color:cadetblue;
                text-align:center;
                height:100px;
                width:100%;
                border: none;
            }
            section {
                height: 800px;
                width: 100%;
                overflow: hidden;
                zoom: 1;
                border: none;
            }
            footer {
                background-color: brown;
                color: cadetblue;
                text-align: center;
                height: 50px;
                width: 100%;
                border: none;
            }
        </style>
    </head>
    <body >


        <a href="User.html" style="position:absolute;right:20px;left:20px;background-color:white;color:black">Back</a>
        <header>

            <img id="Logo" src="images/mylogo.jpg" style="height: 75px; width: 75px; float: left;padding:15px 15px;" />
            <h1 style="padding:25px;font-size:45px;">Our Express Name</h1>
        </header>
        <section>

            <span>
                <b style="font-size:35px;padding:60px;">
                    Receiver's Information:
                </b>
            </span>
            <br />
            <br />
            <br />
            <span style="padding:180px;">
                Receiver's Name: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="receiverName" style="font-size:20px;height:25px;"  ></input>

            </span>
            <br />
            <br />
            <br />
            <span style="padding: 180px;">
                Receiver's Tel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="receiverTel" style="font-size:20px;height:25px;"/>
            </span>
            <br />
            <br />
            <br />
            <span style="padding: 180px;">
                To:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Province&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Street
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="receiverProvince">
                    <option value="null">Select</option>
                    <option value="ShanDong">ShanDong</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="receiverCity">
                    <option value="null">Select</option>
                    <option value="QingDao">QingDao</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="receiverStreet" onchange=getreceive()>
                    <option value="null">Select</option>
                    <option value="1">ShiNan</option>
                    <option value="2">LaoShan</option>
                    <option value="3">LiCang</option>
                    <option value="4">HuangDao</option>
                    <option value="5">ChengYang</option>

                </select>
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                DetailedAddress:
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea id="receiverAddress" style="height:200px;width:250px;font-size:20px;text-align:center">
                    Please write down your receiver's address.
                </textarea>
                <br />
            </span>
            <br />
            <br />
            <span style="padding: 180px;">
                Time for courier to come:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea id="comingTime" style="font-size:20px;height:25px;"></textarea>
            </span>
            <br />
            <br />
            <br />
            <span style="padding: 180px;">
                <button type="button" onclick=finish() style="text-align:center;font-size:20px;border:6px dashed Tomato;background-color:lightskyblue;color:teal;border-radius:15px;height:80px;width:180px;float:right">
                    A &nbsp;&nbsp;f &nbsp;&nbsp;f &nbsp;&nbsp;i &nbsp;&nbsp;r &nbsp;&nbsp;m
                </button>
            </span>
        </div>
        <div id="Sender" style="background-color: whitesmoke; height: 100%; width: 50%; float: left; ">
            <span>
                <b style="font-size:35px;padding:60px;">
                    Sender's Information:
                </b>
            </span>
            <br />
            <br />
            <br />
            <span style="padding:180px;">
                Sender's Name: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea id="senderName" style="font-size:20px;height:25px;"></textarea>
            </span>
            <br />
            <br />
            <br />
            <span style="padding: 180px;">
                Sender's Tel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea id="senderTel" style="font-size:20px;height:25px;"></textarea>
            </span>
            <br />
            <br />
            <br />
            <span style="padding: 180px;">
                From:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Province&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Street
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="senderProvince">
                    <option value="null">Select</option>
                    <option value="ShanDong">ShanDong</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="senderCity">
                    <option value="null">Select</option>
                    <option value="QingDao">QingDao</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="senderStreet" onchange="getsend()">
                    <option value="null">Select</option>
                    <option value="1">ShiNan</option>
                    <option value="2">LaoShan</option>
                    <option value="3">LiCang</option>
                    <option value="4">HuangDao</option>
                    <option value="5">ChengYang</option>
                </select>
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                DetailedAddress:
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea id="senderAddress" style="height:200px;width:250px;font-size:20px;text-align:center">
                    Please write down your address.
                </textarea>
                <br />
            </span>
            <br />
            <br />
            <span style="padding: 180px;">
                Good's Type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea id="goodsType" style="font-size:20px;height:25px;"></textarea>
            </span>
            <span style="padding: 180px;">
                Good's weight:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select id="weight" style="font-size:20px;height:25px;" onchange="getweight()">
                    <option value="null">Select</option>
                    <option value="1">0~5KG</option>
                    <option value="2">5~10KG</option>
                    <option value="3">above 10kg</option>
                </select>
            </span>
        </div>
    </section>
    <footer>
        <h2 style="padding:10px;font-size:25px;">By our group</h2><p id="message"></p>
    </footer>
</form>
</body>
</html>

您好,我遇到了一个奇怪的问题,即该部分内的输入字段不起作用。已经检查删除 css ,删除部分标签。如果您在页眉或页脚中创建输入文本,那么它就可以正常工作。

Textarea 工作正常,问题在于输入文本和省下拉选择类型。

【问题讨论】:

  • 根据您的代码,该部分内没有输入。
  • 你用的是什么浏览器?我已经在 Chrome 和 IE 中对此进行了测试,在该部分中添加您的输入时它似乎工作正常。
  • 注意到小错字&lt;section &gt;(空格)

标签: html


【解决方案1】:

我只修复了提到的问题。我稍微更改了内联和主 CSS 和代码。所以设计也发生了变化。我放置了两个单独的部分,一个用于接收者信息,另一个用于发送者信息。我只对接收器部分进行了编码。我附加的代码不包括发件人部分。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
               <title>OrderForm</title>
    <style>
        header{
            background-color:brown;
            color:cadetblue;
            text-align:center;
            height:100px;
            width:100%;
            border: none;
        }
        section {
            height: auto;
            width: 100%;
            overflow: hidden;
            zoom: 1;
            border: none;
        }
        footer {
            background-color: brown;
            color: cadetblue;
            text-align: center;
            height: 50px;
            width: 100%;
            border: none;
        }
    </style>
</head>

后退 我们的快递名称 收货人信息: 收件人姓名:

        <span style="margin-left:10px;">
            Receiver's Tel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" id="receiverTel" style="font-size:20px;height:25px;"/>
        </span>
        </div>

        <br>
        <br>

        <div id="2" style="padding: 30px;">
            To:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Province&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select id="receiverProvince">
                <option value="null">Select</option>
                <option value="ShanDong">ShanDong</option>
            </select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select id="receiverCity">
                <option value="null">Select</option>
                <option value="QingDao">QingDao</option>
            </select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Street &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <select id="receiverStreet" onchange=getreceive()>
                <option value="null">Select</option>
                <option value="1">ShiNan</option>
                <option value="2">LaoShan</option>
                <option value="3">LiCang</option>
                <option value="4">HuangDao</option>
                <option value="5">ChengYang</option>

            </select>
            </div>

            <br>
            <br>

            <div id="3">
            Detailed Address:
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <textarea id="receiverAddress" style="height:100px;width:250px;font-size:20px;text-align:center">
                Please write down your receiver's address.
            </textarea>
            </div>

            <br />
            <br />

           <div>
          Time for courier to come:
           <textarea id="comingTime" style="font-size:20px;height:25px;"></textarea>
           </div>

       </section>

     <section>  
     </section>
<footer>
    <h2 style="padding:10px;font-size:25px;">By our group</h2><p id="message"></p>

</footer>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-11-10
    • 1970-01-01
    • 1970-01-01
    • 2017-08-14
    • 2018-05-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多