キーを押すとページが更新されますが、マウスをクリックするとファイルシステムが開きます

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> 

これは一覧になっているので、ドロップダウンリストです。ドロップダウンからタブをタップして「コンテンツをアップロード」を入力すると、ファイルを開くのではなくページが更新されます。マウスをクリックすると正常に動作します。

ファイルシステムを開くにはどうすればいいですかkeypressと入力してください。以下のように "" =の代わりのhref：あなたは上ですでにtype="file"を持っているので、すべての

<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 1

入力。

次に、そのようなことをすることができます。

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 2

まずtype="button"を削除：あなたはHREF = "無効（0）JavaScriptを" 置く試すことができます

Answer 3

それがフォーカス可能にするために、html要素にtabIndexプロパティを追加します。これは、div、ラベル、および他の非ナビゲーション要素がそのように振る舞うことを可能にする。これはjsよりもブラウザ機能です。

必要に応じて（他のHTMLタブも）-1、0などの正の値を割り当てたいと思うでしょう。参考のため

：

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

Answer 4

これはあなたの空のHREFによって引き起こされます。これは、tabindex属性を持たないキーボードでネイティブフォーカスを得ることができないことを意味し、クリックされると、あなたが発見したようにページの上部にフォーカスを送ります。

したがって、hrefに便利なものを追加する必要があります。 Dhananjayaによって提案されたJavaScriptが動作します。しかし、より意味のある値は、ファイル入力のid属性であり、何らかの理由でJavaScriptが利用できない場合は、チョークしません。

これがあなたのために良い作品かどうかを確認してください：

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