Cách giải quyết cho nhấp chuột vào nhãn tệp (Firefox)

Question

<label for="input">Label</label><input type="file" id="input"/> 

Trong Firefox 7 không thể kích hoạt hộp thoại mở tệp bằng cách nhấp vào nhãn.

This SO question rất giống nhưng đã được kiểm tra màu xanh lá cây với đó là lỗi trong FF. Tôi đang tìm cách giải quyết.

Bất kỳ ý tưởng nào?

Answer 1

cảm ơn bạn vì q này & a ... đã giúp tôi.

biến thể của tôi về giải pháp @ marten-Wikström của:

if($.browser.mozilla) { 
    $(document).on('click', 'label', function(e) { 
    if(e.currentTarget === this && e.target.nodeName !== 'INPUT') { 
     $(this.control).click(); 
    } 
    }); 
} 

ghi chú

• sử dụng document.ready ($(function() {...});) là không cần thiết, trong một trong hai giải pháp. jQuery.fn.live đảm nhận điều đó trong trường hợp của @ marten-wikstrom; ràng buộc rõ ràng với document trong ví dụ của tôi.
• sử dụng jQuery.fn.on ... kỹ thuật ràng buộc được đề xuất hiện tại.

• thêm !== 'INPUT' kiểm tra để đảm bảo thực hiện không bị mắc kẹt trong một vòng lặp ở đây:

  <label> 
      <input type="file"> 
  </label> 
  

  (kể từ khi trường Tệp nhấp chuột sẽ bong bóng trở lại cho đến nhãn)

• thay đổi event.target kiểm tra để event.currentTarget, cho phép nhấp chuột đầu tiên trên <em> trong:

  <label for="field">click <em>here</em></label> 
  

• sử dụng nhãn thuộc tính control của phần tử cho liên kết trường mẫu đơn giản hơn, đơn giản hơn.

Answer 2

tôi đã đưa ra một cách giải quyết khả thi:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("label").click(function() { 
      $("#input").click(); 
     }); 
    }); 
</script> 
<label for="input">Label</label><input type="file" id="input"/> 

Khá lạ mà FF cho phép bạn để mô phỏng một nhấp chuột vào một tập tin đầu vào. Tôi nghĩ rằng được coi là một nguy cơ bảo mật ...

UPDATE: Đây là giải pháp chung:

<script type="text/javascript"> 
    $(function() { 
     if ($.browser.mozilla) { 
      $("label").live("click", function (event) { 
       if (event.target == this) { 
        $("#" + $(this).attr("for")).extend($("input", this)).first().click(); 
       } 
      }); 
     } 
    }); 
</script> 

Answer 3

Đảo ngược thứ tự của các yếu tố nhãn và đầu vào. iow, đặt phần tử nhãn sau phần tử đầu vào.

Answer 4

Một vài vấn đề phát sinh khi sử dụng phát hiện trình duyệt jQuery, đáng chú ý nhất là chống sử dụng tính năng phát hiện trình duyệt thay vì phát hiện tính năng, ngoài thực tế là 1,9+ không cung cấp chức năng đó.

Có lẽ, sau đó, giải pháp tôi đã đến là hơi giả hình, nhưng nó hoạt động tốt và dường như tuân thủ hầu hết các phương pháp hay nhất hiện nay.

Trước tiên, hãy đảm bảo bạn đang sử dụng Paul Irish's conditional classes.Sau đó, sử dụng một cái gì đó như:

if($("html").hasClass("ie")) { 
    $("label").click(); 
    } else { 
    $("input").click(); 
    } 

Nếu không, tôi thấy sự kiện sẽ được kích hoạt kép trong các trình duyệt như Chrome. Giải pháp này dường như đủ thanh lịch.

Answer 5

Hộp thoại chọn tệp có thể được kích hoạt trong tất cả các trình duyệt theo số click() event. Một giải pháp không phô trương cho vấn đề này có thể trông giống như rằng:

$('label') 
    .attr('for', null) 
    .click(function() { 
     $('#input').click(); 
    }); 

Loại bỏ các thuộc tính for là quan trọng vì các trình duyệt khác (ví dụ Chrome, IE) vẫn sẽ phê chuẩn nó và hiển thị hộp thoại hai lần.

Tôi đã thử nghiệm trong Chrome 25, Firefox 19 và IE 9 và hoạt động như một sự quyến rũ.

Answer 6

Nó dường như được cố định trong FF 23, vì vậy phát hiện trình duyệt trở nên nguy hiểm và dẫn đến các hộp thoại hệ thống kép; (

Bạn có thể thêm xét nghiệm khác để hạn chế việc sửa chữa lên phiên bản FF trước khi phiên bản 23:

if(parseInt(navigator.buildID,10) < 20130714000000){ 
    //DO THE FIX 
} 

Đó là khá xấu xí, nhưng sửa chữa này sẽ được loại bỏ càng sớm càng cũ phiên bản của FF sẽ biến mất.

Answer 7

Hãy thử mã này

<img id="uploadPreview" style="width: 100px; height: 100px;" 
onclick="document.getElementById('uploadImage').click(event);" /> 
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
<script type="text/javascript"> 
    function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
     oFReader.onload = function (oFREvent) { 
      document.getElementById("uploadPreview").src = oFREvent.target.result; 
     }; 
    }; 
</script> 

Answer 8

bạn có thể gửi sự kiện từ bất kỳ sự kiện nào tới đầu vào loại = tệp nếu bạn muốn làm hiển thị đầu vào: none và visibility: hidden và sau đó gửi sự kiện từ, nói, nhấp vào | chạm vào hình ảnh. ..

<img id="customImg" src="file.ext"/> 
<input id="fileLoader" type="file" style="display:none;visibility:hidden"/> 

<script> 
    customImg.addEventListener(customImg.ontouchstart?'touchstart':'click', function(e){ 
     var evt = document.createEvent('HTMLEvents'); 
     evt.initEvent('click',false,true); 
     fileLoader.dispatchEvent(evt); 
    },false); 
</script> 

Answer 9

Một tác phẩm xung quanh khi bạn không cần/muốn có hộp đầu vào (như upload hình ảnh) là sử dụng opacity: 0 trong phần tử và sử dụng pointer-events: none; trong nhãn. Giải pháp thực sự là thiết kế cụ thể nhưng có thể có tác dụng đối với một người đến với điều này. (Cho đến bây giờ là lỗi không được cố định)

http://codepen.io/octavioamu/pen/ByOQBE