CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SharpCoder
SharpCoder

Reputation: 19163

<button> not working in IE 11

I am using Bootstrap markdown editor. When we enable file upload feature, it generates following output, which results in a button. When user clicks on the button, file upload box is open. 

<button title="Uplaod image" 
         class="btn btn-sm btn-default md-btn-file" 
         style="border: 1px solid red; border-image: none;" 
         type="button" data-mdtooltip="tooltip">

      <span class="glyphicon glyphicon-upload"></span>
    <input class="md-input-upload" type="file" accept=".jpg,.jpeg,.png,.gif" multiple="">
 </button>

Problem is this feature is not working in IE 11. Click on button does not open IE 11. This feature works fine in chrome.

If I remove the code which generates to a div. after clicking on button, i get to see file upload dialog box.

<div title="Uplaod image" 
             class="btn btn-sm btn-default md-btn-file" 
             style="border: 1px solid red; border-image: none;" 
             data-mdtooltip="tooltip">

          <span class="glyphicon glyphicon-upload"></span>
        <input class="md-input-upload" type="file" accept=".jpg,.jpeg,.png,.gif" multiple="">
     </div>

I have two questions:

  1. Is it a known issue that button tag does not work well with IE 11 & is there any work around available?
  2. Is it possible to use jquery/ javascript to find this button tag after its rendered and then replace it with DIV tag?

Upvotes: 0

Views: 1475

Answers (2)

SharpCoder
SharpCoder

Reputation: 19163

I am using Jquery to explicitly invoke the click event of file upload:

document.querySelector(".md-btn-file").addEventListener("click", function() {
        var clickEvent = document.createEvent('MouseEvents');
        document.querySelector(".md-input-upload").click(clickEvent);
      });

This causes chrome to open the file upload dialog box two times. I will add another check to see if broswer is IE then only add this event.

Upvotes: 0

Quentin
Quentin

Reputation: 943564

It is forbidden, by the HTML specification, to place an <input> inside a <button>.

It also doesn't make sense to do so.

File inputs generate their own button for clicking on.

Content model:
Phrasing content, but there must be no interactive content descendant.

(Input elements are interactive content)

source

Upvotes: 5

Related Questions