javascript - Prevent clicking on file input's label from opening file browser - Stack Overflow

admin管理员组

文章数量:1356900

I have a form where users can upload images, and I'm using <label>s for each input. However, in this particular case it's not desirable for the file browser to open when a user clicks on the label element. I've tried using jQuery's preventDefault on the labels, but it doesn't work. Any way to disable this functionality? I'd still like to stick with labels instead of replacing them with other elements.

My HTML:

<div class="control-group">
    <label for="userImages" class="nodefault">Please upload images</label>
    <div class="controls">
        <input type="file" id="userImages" name="userImages" />
    </div>
<div>

and my JS:

$(document).ready(function() {
    $(".nodefault").click(function(e) {
        e.preventDefault();
    });
});

I'm using:
jQuery v1.10.1
jQueryUI v1.10.3
Twitter Bootstrap v2.3.2

I have a form where users can upload images, and I'm using <label>s for each input. However, in this particular case it's not desirable for the file browser to open when a user clicks on the label element. I've tried using jQuery's preventDefault on the labels, but it doesn't work. Any way to disable this functionality? I'd still like to stick with labels instead of replacing them with other elements.

My HTML:

<div class="control-group">
    <label for="userImages" class="nodefault">Please upload images</label>
    <div class="controls">
        <input type="file" id="userImages" name="userImages" />
    </div>
<div>

and my JS:

$(document).ready(function() {
    $(".nodefault").click(function(e) {
        e.preventDefault();
    });
});

I'm using:
jQuery v1.10.1
jQueryUI v1.10.3
Twitter Bootstrap v2.3.2

• javascript
• jquery
• html
• file-upload

Share Improve this question Follow asked Jul 26, 2013 at 15:55 SchlausSchlaus 19.3k1111 gold badges3939 silver badges6868 bronze badges 8

• 1 Typo in .ready() missing ) in the end – Dhaval Marthak Commented Jul 26, 2013 at 15:56
• That is browser functionality. If you have a label for a file input the browser automatically does the same as clicking on the input field itself. You don't have to do anything to get that behaviour. – Jim Martens Commented Jul 26, 2013 at 16:01
• @roasted Yes, he wants to prevent that default behaviour. If you want to prevent it, you have to do something. – Jim Martens Commented Jul 26, 2013 at 16:03
• @roasted that's because I don't want to prevent the default function from all labels, just file upload ones. – Schlaus Commented Jul 26, 2013 at 16:04
• While removing the for attribute would work, it's not an ideal situation for accessibility reasons. – DaveMongoose Commented Jul 26, 2013 at 16:04

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 6

You have a Typo in .ready() missing ) in the end

$(document).ready(function() {
    $(".nodefault").click(function(e) {
        e.preventDefault();
    });
});

Works fine Here

ready() not closed

$(document).ready(function () {
    $(".nodefault").click(function (e) {
        e.preventDefault();
    });
});

本文标签： javascriptPrevent clicking on file input39s label from opening file browserStack Overflow