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

score 24 · Accepted Answer

我遇到了同样的问题并找到了不同的方法。我只是让那个按钮和我需要的一样大，上面有字体大小。然后人根本无法点击文本部分。

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

score 5 · Accepted Answer

跟进SDLion 所说的话....
这可能就是您所看到
这是你看到的
的但实际上最重要的是，有一个文件上传控件已变得透明。但除此之外，还有一个透明的文件上传控件。
单击浏览按钮一键弹出文件上传对话框。在 IE 中，如果你想看到文件上传对话框，你必须双击它左边的文本框。

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

score 3 · Accepted Answer

虽然@bastos.sergio 在文本部分中发生的事情是正确的，但如果您习惯使用 JavaScript，有一种方法可以解决这个问题。

你会需要：

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

脚步：

创建“包装器”div
创建一个内部“按钮” div
将表单元素放在内部“按钮”div 下方
将“包装器”和“内部”div 设置为相同大小
设置overflow:hidden在包装纸上
为设置点击功能的“内部”div 创建一个 JQuery 脚本
在“内部”函数中单击.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>

score 0 · Accepted Answer

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

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

有关更多详细信息，请参见此处。

score 0 · Accepted Answer

我找到了另一个更简单的解决方案，只为这个元素触发 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/

编辑：修改示例以限制仅左键单击的事件处理（有关详细信息，请参见：如何区分鼠标左键和右键单击）

score 0 · Accepted Answer

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

HTML

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

更少的 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;
  }
}

javascript - IE 需要双击自定义按钮

6 回答 6

Related

Reference