javascript IE 需要双击自定义按钮

IE requires double click with custom button

提问by Travis Pessetto

I have a script that is dived as:

我有一个脚本，它被潜水为：

HTML:

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):

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:

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.

注意：这个问题在使用模糊隐藏 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.

在 Chrome 和 Firefox 中，该按钮只需要单击一次。在 IE 10 中，它需要双击，这是我不想要的。我正在想办法让它单击一下。

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

到目前为止，我唯一尝试过的就是.render("click")输入，但这没有用。

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

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

回答by Dovydas ?opa

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:

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

回答by tBone77

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.

跟进SDLion 所说的....
这可能是您所看到的

但实际上最重要的是，有一个已变得透明的文件上传控件。
单击浏览按钮，一键打开文件上传对话框。在 IE 中，如果要查看文件上传对话框，则必须双击其左侧的文本框。

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

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

回答by Travis Pessetto

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.

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

You will need:

你会需要：

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

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

Steps:

脚步：

1. Create the "wrapper" div
2. Create an inner "button " div
3. Place the form element underneath the inner "button" div
4. Set the "wrapper" and "inner" divs to the same size
5. Set overflow:hiddenon the wrapper
6. Create a JQuery script for the "inner" div setting the on click function
7. In the "inner" function click function call .click()on the input

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

Seems to work for me in IE 10.

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

回答by Fred K

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

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

HTML

HTML

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

LESS CSS

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

回答by bastos.sergio

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

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

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 herefor more details.

请参阅此处了解更多详情。

回答by pastorello

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:

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

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/

这是您修改的 jfiddle，在 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 jQueryfor details)

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