修改自動滾動<input>必需屬性HTML

當輸入無效時，輸入字段被固定標題隱藏。修改自動滾動<input>必需屬性HTML

是否可以修改或禁用輸入必需屬性的自動滾動？

<!DOCTYPE html> 
<html> 
<body> 
<style>   
    body { 
     margin: 0; 
    } 

    header { 
     width: 100%; 
     height: 50px; 
     position: fixed; 
     color: red; 
     background: #b2b2b2; 
     opacity: 0.6; 
    } 

    form { 
     padding-top: 65px; 
    } 
</style> 

<header>Input Testing</header> 

<form action="demo_form.asp"> 
    Username: <input type="text" name="usrname" required> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 

<input type="submit"> 

</form> 
</body> 
</html>

https://jsfiddle.net/0z56f24f/

最好的解決辦法將被附加標題高度的緣至滾動位置正確地顯示它。

來源

2016-08-30 pdunker

[需要HTML5輸入，在提交時滾動輸入固定導航欄]（http://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar -on-submit） – pdunker

最後發現SO的解決方案：

HTML5 input required, scroll to input with fixed navbar on submit

var delay = 0; 
var offset = 125; 

document.addEventListener('invalid', function(e){ 
    $(e.target).addClass("invalid"); 
    $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay); 
}, true); 
document.addEventListener('change', function(e){ 
    $(e.target).removeClass("invalid") 
}, true);

https://jsfiddle.net/0z56f24f/2/

來源

2016-08-30 09:39:41 pdunker

您可以用js滾動頂部，

$('#commentForm').click(function(){ 
 
\t if (!$('input[required]').val()) $('body').scrollTop(0); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    width:100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    color: red; 
 
    background: white; 
 
    opacity: 0.7; 
 
} 
 

 
form { 
 
    padding-top: 65px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<header>INPUT TESTING</header> 
 
<form action="demo_form.asp"> 
 
    Username: <input type="text" name="usrname" required> 
 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> 
 

 
<input type="submit" id="commentForm"> 
 
</form>

來源

2016-08-30 08:24:48

嘗試過但無法正常工作。 https://jsfiddle.net/cfrebyfL/ – pdunker

你忘了添加jquery lib，更新你的小提琴，檢查一次。 https://jsfiddle.net/cfrebyfL/2/ –

對不起我的錯誤。 – pdunker

修改自動滾動<input>必需屬性HTML

回答

相關問題