輸入[文件]不可聚焦時，內部包裹標籤

我想更改默認文件[輸入]看。所以我已經包裹在這樣的標籤輸入[文件]不可聚焦時，內部包裹標籤

<label class="btn upload-dir-btn btn-file"> 
Browse <input type="file" required id="dir-pic-file" name="dir-pic-file" novalidate> 
</label>

我做了一些驗證時提交表單。但是當我得到錯誤

一個無效的窗體控件與name ='dir-pic-file'是不可聚焦的。

這裏是隱藏的默認文件

}

的CSS，但如果我刪除的CSS它工作正常。這是我的驗證

$('#add-dir-form').on('submit',function(e){ 

    var file = $('#dir-pic-file').val(); 
    if (file = '') { 
     $('#pic-error').css({'display':'block'}); 
    } 

    e.preventDefault(); 
    });

來源

2017-02-23 Naveen Kumar

首先，爲了改變輸入的樣式，你不需要把它放在標籤標籤中。你可以在你的css中使用input [type =「file」]來設置它。

儘量不要使用display：none;，因爲它會隱藏來自DOM樹的輸入，所以你不能訪問它，使用一些其他的CSS。

來源

2017-02-23 13:59:03

即使一個HTML5元素上顯示沒有您可以用JavaScript –

是訪問它，我們可以訪問它。但對於type =文件，我們需要可點擊的元素。 –

我不河畔但也許你忘了的屬性，標籤和刪除所需

<label for="dir-pic-file" class="btn upload-dir-btn btn-file"> 

<label class="btn upload-dir-btn btn-file"> 
Browse <input type="file" id="dir-pic-file" name="dir-pic-file" novalidate> 
</label>

來源

2017-02-23 14:01:04

如果你正在控制display:none，HTML5的不瞭解如何驗證控制。如果您通過javascript或jquery驗證它，並且您正在製作display:none，那麼您應該從中刪除required。所以就這樣吧。

<label for="dir-pic-file" class="btn upload-dir-btn btn-file"> 
Browse <input type="file" id="dir-pic-file" name="dir-pic-file" novalidate> 
</label>

來源

2017-02-23 14:03:10

Firefox允許您在display:none下操作文件輸入，另一方面Chrome並不幸運。它需要是visibility:hidden或opacity:0，然後離開頁面，所以它不妨礙。請使用visibility:hidden和position:absolute;和position:absolute;通過點擊紅色箭頭來測試兩個瀏覽器（可能需要幾次，因爲我把箭頭放在很近的位置，就像是在提示...）好吧，現在更新很明顯。

$('#add-dir-form').on('submit', function(e) { 
 

 
    var file = $('#dir-pic-file').val(); 
 
    if (file = '') { 
 
    $('#pic-error').css({ 
 
     'display': 'block' 
 
    }); 
 
    } 
 

 
    e.preventDefault(); 
 
});

body { 
 
    position: relative 
 
} 
 

 
#dir-pic-file { 
 
    visibility: hidden; 
 
    /* or opacity:0;*/ 
 
    position: absolute; 
 
    top: -500px; 
 
} 
 

 
.btn-file { 
 
    border: 3px inset black; 
 
    position: absolute top:50px; 
 
    left: 50px; 
 
    cursor: pointer; 
 
    border-radius: 16px; 
 
    padding: 0 6px; 
 
} 
 

 
.btn-file::before { 
 
    content: '\1f882'; 
 
    font-size: 20px; 
 
    color: red; 
 
    vertical-align: baseline; 
 
    line-height: .6 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="btn upload-dir-btn btn-file"> 
 
Browse <input type="file" required id="dir-pic-file" name="dir-pic-file" novalidate> 
 
</label>

來源

2017-02-23 14:03:58 zer00ne

輸入[文件]不可聚焦時，內部包裹標籤

回答

相關問題