Seite aktualisiert bei Tastendruck, öffnet aber das Dateisystem auf Mausklick

Question

<a href="" tabindex="0">          
    <label for="my_label" class="my_label" name="Upload" data-bind="attr: { for: 'uploadContent' + SubmissionId() }"> 
     <span>Upload Content</span> 
    </label> 
    <div class="hidden"> 
     <input type="button" id="my_label" class="fileupload" data-bind="event: { change: $parent.upload($data, $element, 'zip', false) }, attr: { id: 'uploadContent' + Id() }" accept="application/zip" type="file"> 
    </div> 
</a> 

Dies ist in einer Liste, so dass es ein Dropdown ist. Wenn ich das Dropdown-Menü durchgebe und die Eingabetaste "Inhalte hochladen" drücke, wird die Seite aktualisiert und nicht die Dateien geöffnet. Es funktioniert gut, wenn ich mit meiner Maus klicke.

Wie kann ich das Dateisystem öffnen unter keypressGeben Sie ein?

Answer 1

Sie können versuchen, href = "javascript: void (0)" platzieren statt href = "", wie unten:

<a href="javascript:void(0)" tabindex="0">          
    <label for="my_label" class="my_label" name="Upload" data-bind="attr: { for: 'uploadContent' + SubmissionId() }"> 
    <span>Upload Content</span> 
</label> 
<div class="hidden"> 
    <input type="button" id="my_label" class="fileupload" data-bind="event: { change: $parent.upload($data, $element, 'zip', false) }, attr: { id: 'uploadContent' + Id() }" accept="application/zip" type="file"> 
</div> 

Answer 2

allererst entfernen type="button", weil Sie bereits type="file" haben auf die Eingang.

Dann können Sie so etwas tun.

function handle_enter(ev){ 
 
    if (ev.which == 13) 
 
    return document.getElementById('my_label').click(); 
 
    
 
}

.hidden{ 
 
    display:none; 
 
}

<a href="#" tabindex="0" onkeypress="handle_enter(event)">          
 
    <label for="my_label" class="my_label" name="Upload" data-bind="attr: { for: 'uploadContent' + SubmissionId() }"> 
 
     <span>Upload Content</span> 
 
    </label> 
 
    <div class="hidden"> 
 
     <input id="my_label" class="fileupload" data-bind="event: { change: $parent.upload($data, $element, 'zip', false) }, attr: { id: 'uploadContent' + Id() }" accept="application/zip" type="file"> 
 
    </div> 
 
</a>

Answer 3

die TabIndex-Eigenschaft auf das HTML-Element hinzufügen, es fokussierbar zu machen. Dies ermöglicht div, label und anderen Nicht-Navigationselementen, sich als solche zu verhalten. Dies ist eine Browserfunktion mehr als eine js.

Je nach Ihren Bedürfnissen (und den übrigen HTML-Tabs) sollten Sie ihm die Werte -1, 0 oder andere positive Werte zuweisen.

Zum Vergleich:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Answer 4

Dies wird durch die leeren href verursacht. Das bedeutet, dass Sie mit der Tastatur keinen nativen Fokus ohne Tabindex-Attribut erhalten können. Wenn Sie darauf klicken, wird der Fokus wie oben beschrieben an den Anfang der Seite gesendet.

Sie müssen also etwas nützliches zum href hinzufügen. Das von Dhananjaya vorgeschlagene JavaScript wird funktionieren. Aber ein aussagekräftigerer Wert wäre das ID-Attribut der Dateieingabe, und es wird nicht ersticken, wenn JavaScript aus irgendeinem Grund nicht verfügbar ist.

Sehen Sie, wenn dies für Sie besser funktioniert:

<a href="#my_label">          
    <label for="my_label" class="my_label" name="Upload" data-bind="attr: { for: 'uploadContent' + SubmissionId() }"> 
     <span>Upload Content</span> 
    </label> 
    <div class="hidden"> 
     <input id="my_label" class="fileupload" data-bind="event: { change: $parent.upload($data, $element, 'zip', false) }, attr: { id: 'uploadContent' + Id() }" accept="application/zip" type="file"> 
    </div> 
</a>