IE需要双击自定义按钮

Question

我有一个潜水的脚本：

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中的闪烁图标之前，已经存在此问题。

在Chrome和Firefox中，按钮只需单击一下即可。在IE 10中，它需要双击，我不想要。我试图想办法让它单击一下。

到目前为止，我唯一尝试的是.render("click")输入，但这不起作用。

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

Answer 1

我遇到了同样的问题并找到了不同的方法。我只是把那个按钮变成了我需要的大字体就可以了。然后，人们根本无法点击文字部分。

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

Answer 2

跟进SDLion said....的内容
这可能就是你所看到的
但实际上有一个文件上传控件已经变得透明。
单击浏览按钮，只需单击一下即可打开文件上载对话框。 在IE中如果要查看文件上载对话框，则必须双击其左侧的文本框。

增加文件输入的字体大小以填充按钮图像

Answer 3

虽然@ bastos.sergio在文本部分中发生的事情是对的，但如果您习惯使用JavaScript，则有办法解决这个问题。

您需要：

• 包装器div标签
• 内部开发标记
• 某种形式输入
• JQuery（在2.1上测试）

<强>步骤：

1. 创建“wrapper”div
2. 创建一个内部“按钮”div
3. 将表单元素放在内部“button”div
下面
4. 将“wrapper”和“inner”div设置为相同的大小
5. 在包装器上设置overflow:hidden
6. 为“内部”div创建一个JQuery脚本，设置点击功能
7. 在“内部”功能中，单击输入
上的函数调用.click()

似乎在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>

Answer 4

双击发生在文件上传的文本部分，如@TravisPessetto所述。

由于无法隐藏/删除文件输入控件中的文本部分，我建议您在文件输入上放置一个常规按钮。

See here了解详情。

Answer 5

我找到了另一个更简单的解决方案，只是在mousedown上为这个元素触发事件“click”：

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

为了避免其他浏览器出现问题，请将此解决方案仅应用于IE：

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

这是你的jfiddle修改，在IE 9-10上检查： http://jsfiddle.net/7Lq3k/

编辑：示例已修改，以便仅限制左键单击的事件处理 （详见How to distinguish between left and right mouse click with jQuery）

Answer 6

我混合使用各种解决方案来获得适合我的解决方案（在每个浏览器上）。它是使用LESS嵌套编写的。

<强> 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;
  }
}