IE requires double click with custom button

问题

I have a script that is dived as:

HTML:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

JavaScript(JQuery 2):

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

CSS:

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

Note: This issue was there before blur was put to hide the flashing icon in IE.

In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.

The only thing I've tried so far is to .render("click") on the input, but that didn't work.

JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

回答1:

I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.

<div class="divFileUpload">
    <input class="fileUpload" type="file" />
</div>

and css:

.divFileUpload {
    background-color: #F60;
    border-radius: 5px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    width: 50%
}
.fileUpload {
    cursor: pointer;
    font-size: 10000px; /* This is the main part. */
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

回答2:

To follow up on what SDLion said....
This might be what you see

But really on top of that there is a file upload control that has been made transparent.

Clicking on the browse button brings up the file upload dialog with one click. In IE You have to double click the text box to the left of it if you want to see the file upload dialog.

Increase the font size of the file input to fill the button image

回答3:

While @bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.

You will need:

A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)

Steps:

Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input

Seems to work for me in IE 10.

$(document).ready(
    function()
    {
        $("#open_dialog").on("click",function()
                                {
                                    $("input").click();
                                });
        $("input").on("change",function()
                      {
                          alert($("input"));
                          $("#notice").html("uploading");
                      });
    });

#open_dialog
{
    position: relative;
    width: 200px;
    height: 50px;
    color: white;
    font-family: "Arial";
    font-size: 14pt;
    text-align: center;
    top: 25px;
    margin-top: -.5em;
    z-index: 1;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    background: green;
    z-index: 0;
}
input
{
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="open_dialog">Click Me</div>
    <input type="file" />
</div>
<div id="notice">Nothing to upload</div>

回答4:

The double click is happening on the text portion of the file upload, like @TravisPessetto stated.

Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.

See here for more details.

回答5:

I found another more simple solution, just trigger the event "click" on mousedown for this element only:

$("input").mousedown(function() {
    $(this).trigger('click');
})

in order to avoid problems on other browsers, apply this solution to IE only:

if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
    $("#your_file_input").mousedown(function(event) {
        if (event.which == 1) {
            $(this).trigger('click');
        }
    })
}

here's your jfiddle modified, check it on IE 9-10: http://jsfiddle.net/7Lq3k/

Edit: example modified in order to limit the event handling for left click only (see: How to distinguish between left and right mouse click with jQuery for details)

回答6:

I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.

HTML

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>

LESS CSS

/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
  position: relative;
  overflow: hidden;
  margin: 10px;

  input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 10000px;
  }

  // For Chrome
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }
}

来源：https://stackoverflow.com/questions/17195798/ie-requires-double-click-with-custom-button

标签

javascript

jquery

html5

css3

internet-explorer-10