向表单添加滚动功能

Adding scroll feature to the form

本文关键字：功能 滚动 添加 表单      更新时间：2023-09-26

我面临的问题是我的窗体在窗口上保持静态。但我想要的是，当用户在"输入您的起始"城市文本框中写入查询时，form_1应该跳到窗口顶部。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
    img.bg {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }
    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
        #form_1 {
            width: 20%;
        }
    }
    #form_1 {     
        position: relative;
        border-radius: 15px;
        width: 80%;
        margin: 15% auto; 
        padding: 20px;
        background: white;
        -moz-box-shadow: 0 0 20px black;
        -webkit-box-shadow: 0 0 20px black; 
        box-shadow: 0 0 20px black;
        display: table;
        border :solid 2px  black;
        padding: 15px;
    }
    .row {
        display:table-row;
    }
    .row label {
        text-align: right;
    }
</style>
</head>
<body>
<div id="yt" >
    <img src="bg.jpg" class="bg">
    <form id="form_1" tabindex="0">
    <label>Enter Starting City</label>
    <div class="row">
    <input type="text" name="s_city"></br>
</div>
<div class="row">
    <label>Wait While The Cities Appear
    </label></br>
    <textarea rows="10" cols="30"></textarea></br>
    <div class="row">
</form>
</div>
</body>
</html>

我注意到一些错误的标记和错误的关闭标记，修复它们，看看这是否有效。

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      img.bg {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
      }
      @media screen and (max-width: 1024px){
        img.bg {
          left: 50%;
          margin-left: -512px; }
        #form_1 {
          width: 20%;
        }
      }
      #form_1 {     
        position: relative;
        border-radius: 15px;
        width: 80%;
        margin: 15% auto; 
        padding: 20px;
        background: white;
        -moz-box-shadow: 0 0 20px black;
        -webkit-box-shadow: 0 0 20px black; 
        box-shadow: 0 0 20px black;
        display: table;
        border :solid 2px  black;
        padding: 15px;
      }
      .row {
        display:table-row;
      }
      .row label {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div id="yt" >
      <img src="bg.jpg" class="bg" />
      <form id="form_1" tabindex="0">
        <label>Enter Starting City</label>
        <div class="row">
          <input type="text" name="s_city"><br/>
        </div>
        <div class="row">
          <label>Wait While The Cities Appear</label><br/>
          <textarea rows="10" cols="30"></textarea><br/>
        </div>
      </form>
    </div>
  </body>
</html>

相关文章：