Kann ich einen Doppelklick mit einem einzigen Klick in einer Formulareingabe auslösen [type = "file"]?

Question

Ich habe ein Formular input zum Übermitteln einer Datei und ich styled es, weil ich nicht den nativen Stil mochte. Jetzt habe ich einen einzigen Knopf, der beim Anklicken den Dialog öffnet, um die Datei auszuwählen. Es funktioniert gut mit einem einzigen Klick auf Firefox und Chrome, aber es funktioniert nicht in IE. Die Schaltfläche benötigt einen Doppelklick, um den Dialog in IE zu öffnen.

Ich habe versucht, einen Doppelklick mit einem einzigen Klick auslösen jQuery:

$("input").click(function() { 
    $(this).dblclick(); 
}); 

Es ist jedoch nicht zu funktionieren scheint. Gibt es einen anderen Ansatz, um einen Doppelklick für IE auszulösen?

Hier ist die Demo: http://jsfiddle.net/HAaFb/

Answer 1

Die Antwort ist nicht, einen dblclick auszulösen, aber Dateidialogöffnung mit IE zu machen ... Richtig? Also ich denke, die Soluce einen Klick auf die Datei eingegeben auslösen würde

$("#formId").find("input[type='file']").trigger('click'); 

In Ihrer Geige, ich dies tun (Wich versteckt werden?):

$("input").click(function() { 
    $('input[type="file"]').click(); 
}); 

Ich versuche, diese

$('input[type="file"]').hide().parent().append($('<span />').attr('class', 'filebutton').text('Upload')); 
$(".filebutton").click(function() { 
    $('input[type="file"]').click(); 
}); 

Mit diesem CSS

form { 
    color:#666; 
} 
.filebutton { 
    content:'upload'; 
    font:small-caps 15px Georgia; 
    letter-spacing:1px; 
    border-radius:10px; 
    border:1px solid #eee; 
    width:100px; 
    padding:10px; 
    margin:20px; 
    text-align:center; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:1; 
    background-color:#f8f8f8; 
} 

.filebutton:hover { 
    background-color:#f3f3f3!important; 
    color:#c00; 
    cursor : pointer; 
} 

Ein d es Arbeit ist ...

Answer 2

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

Answer 3

Was ist so etwas wie dieses:

var count=0; 
$("input").click(function(e) { 
    count++; 
    if(count==2){ 
     count=0; 
    }else{ 
     e.preventDefault(); 
    } 
}); 

DEMO: http://jsfiddle.net/HAaFb/1/

http://jsbin.com/ukotit/17/edit

Answer 4

prüfe ich habe das nicht, aber ich Stellen Sie sich vor, Sie müssten so etwas verwenden:

$('input').on('click', function() { 
    $(this).trigger('dblclick'); 
}); 

Ich hoffe, das ist nicht dumm, haha.

Answer 5

Dateieingaben sind eine native/ActiveX-Komponente im IE und daher können keine Ereignisse für sie ausgeführt werden - dasselbe gilt für ausgewählte Eingaben.

Für was brauchen Sie wirklich den Doppelklick?

Answer 6

Es ist Ihr CSS ... Wenn Sie die Deckkraft und den Clip-Zeug in IE deaktivieren, werden Sie sehen, dass die eigentliche Schaltfläche Durchsuchen auf der rechten Seite ist.

Stellen Sie sicher, dass Filter: Opazität nicht in IE9 verwendet wird, dass für mich gearbeitet hat. JSFiddle funktioniert nicht in IE7/8, daher konnte ich diese nicht testen.

Answer 7

Ich entdeckte, dass die jQuery-Datei Upload-Demo-Seite tatsächlich das Dateieingabefeld (während "versteckt") neu positioniert, so dass die Schaltfläche Durchsuchen gut im Bereich der Schaltfläche "Dateien hinzufügen" sitzt. Wenn Sie auf diesen Knopf mit IE 8/9/10 klicken, öffnet sich das mit einem einzigen Klick.

http://blueimp.github.io/jQuery-File-Upload/

In dem einen CSS Ich sehe:

.fileinput-button input { 
... 
right: 0px; 
... 
transform: translate(300px, 0) scale(4); 
} 

Answer 8

Ich weiß, ich bin wahrscheinlich zu spät zur Party, aber nur für den Fall, dass jemand anderes stößt auf diesen Beitrag, ich war in der Lage zu lösen ein ähnliches Problem mit diesem:

$("#uploadInput").bind('mousedown', function (event) { 
    $(this).trigger('click') 
}); 

Arbeitete auf beide IE10 & IE11.