IE需要双击自定义按钮 [英] 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;
 }

注意：隐藏在IE中的闪烁图标。

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

在Chrome和Firefox中，按钮只需要一次点击。在IE 10它需要双击，我不想要的。我试图想出一种方法让它单击。

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.

到目前为止，我尝试的唯一方法是在输入上输入 .render（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/

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

推荐答案

我有同样的问题，发现不同的方法。我只是让那个按钮与我需要的大小一样的字体大小。那么person根本无法点击文本部分。

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>

和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%
}

这篇关于IE需要双击自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！