Question

我有一个很好的[标签]按钮，可以触发文件上传窗口。单独的图像上传表单/脚本本身位于页面底部。丑陋的默认文件上传按钮本身被CSS隐藏。

当我点击[label]按钮时，浏览器会一直滚动到我隐藏的表单和脚本内容所在的页面底部。如何防止这种聚焦或滚动？

以下是我的代码设置方式。一个很好的上传按钮和界面，用于在页面顶部附近上传图像（在“主”窗体内）。页面底部的实际图片上传表单（单独的表单）：

<form name="main-form">
  <div class="imagelist" id="imagelist">
    <div class="uploadcontainer"><br><br>
      <label for="imagefile" id="uploadbutton" class="btn btn-primary btn-lg">Upload Images</label>
    </div>
  </div>
  ... (other input fields, etc for main form, etc.)
</form>

.
.
.
.
all the way to the bottom of the page:
.
.

<form name="uploadform" id="uploadform" method="post" action="/edit-images/uploadimage.php" enctype="multipart/form-data">
  <input type="hidden" name="itemimagesid" value="<?php echo $itemid; ?>" />
  <input type="hidden" name="itemtype" value="new" />
  <input type="file" name="imagefile" id="imagefile" onchange="uploadFile()">
</form>

Answer 1

嗯 - 你能滚回标签吗？

$(document).ready(function() {
  $('#uploadbutton').click(function(event) {
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 0.1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="main-form">
  <div class="imagelist" id="imagelist">
    <div class="uploadcontainer"><br><br>
      <label for="imagefile" id="uploadbutton" class="btn btn-primary btn-lg">Upload Images</label>
    </div>
  </div>
  ... (other input fields, etc for main form, etc.)
</form>

<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />

<form name="uploadform" id="uploadform" method="post" action="/edit-images/uploadimage.php" enctype="multipart/form-data">
  <input type="hidden" name="itemimagesid" value="<?php echo $itemid; ?>" />
  <input type="hidden" name="itemtype" value="new" />
  <input type="file" name="imagefile" id="imagefile" onchange="uploadFile()">
</form>

防止聚焦或阻止滚动聚焦元素

1 个答案: