Question

当输入无效时，输入字段被固定标头隐藏。

是否可以修改或禁用输入所需属性的自动滚动？

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

最佳解决方案是在滚动位置添加页眉高度的边距以正确显示。

Answer 1

您可以使用js滚动顶部，

＆＃13;

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

＆＃13;

body {
  margin: 0;
}

header {
  width:100%;
  height: 50px;
  position: fixed;
  color: red;
  background: white;
  opacity: 0.7;
}

form {
  padding-top: 65px;
}

＆＃13;

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

＆＃13;

Answer 2

最后在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/

修改autoscroll <input />必需属性HTML

2 个答案: