Prevent focus or prevent scrolling to focus element

Question

I have a nice [label] button that triggers a file upload window. The separate image uploading form/script itself is at the bottom of the page. The ugly default file upload button itself is hidden by CSS.

When I click the [label] button, the browser scrolls all the way to the bottom of the page where my hidden form and script stuff is located. How do I prevent this focusing or scrolling?

Here is how my code is set up. A nice upload button and interface for uploading images near the top of the page (inside "main" form). The actual image uploading form (separate form) at the bottom of the page:

<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>

Don't you have any javascript that triggers the file input and the upload ? — adeneo, Sep 30 '16 at 23:00
Clicking "label" button is supposed trigger clicking the file input button. I guess this is by default. I am also using Bootstrap 3.2.0, but not sure if this makes a difference. — peppy, Sep 30 '16 at 23:05

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2016-09-30T23:30:52.593

0

Hmm - well could you scroll back to the label?

$(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>

edited Sep 30 '16 at 23:30

answered Sep 30 '16 at 23:14

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

Thanks for the response. Unfortunately, I cannot use this solution as I need this to work in IE8 and IE9. My script actually works great on almost all browsers, except for the most current Firefox version. The only problem is the focusing/scrolling down to the bottom form when the file input button is clicked. – peppy Sep 30 '16 at 23:21
Is there a way through jQuery to detect if a browser supports the .click() feature? – peppy Sep 30 '16 at 23:37
1

perhaps the [accepted answer on this question](http://stackoverflow.com/questions/13141495/click-method-browser-support#answer-23497074) will help you... – Sᴀᴍ Onᴇᴌᴀ Sep 30 '16 at 23:39
I tried the scrollback solution and it works for the first image, but does not work on the second image upload. When the "imagelist" container with AJAX, that button is loaded up in the AJAX as well. After 10 images, that button is disabled on purpose (maximum of 10 images). – peppy Sep 30 '16 at 23:55
I figured out how to get the function to work all the time using: $(document).on("click", "#uploadbutton", function(e) {...}); The only problem now is IE8/IE9 scrolls down to the hidden form, but immediately scrolls back up only AFTER an image is uploaded or the file upload dialog is canceled. I guess I could live with this, but it would be nice to fix it. – peppy Oct 01 '16 at 00:20

Prevent focus or prevent scrolling to focus element

1 Answers1