问题
I'm trying to get the following code to work but it doesn't:
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", function () {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});
What this says is: for each input and select in my form, add an event listener that listens for the "invalid" state (fired upon submitting the form if any of the inputs or selects are invalid). The event listener will scroll the input or select into view at the center of the page in a smooth animation.
But it scrolls neither to the center of the page nor smoothly. My inputs and selects get scrolled to the top of the page instantly.
Adding a console log to the event listener tells me the event listener is responding and 'this' does refer to the right input or select:
console.log('this =', this);
So why is this not working for me?
EDIT:
Here is the HTML portion:
<section class="clearfix form-section">
<div class="container">
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-xs-12 intro">
Holland and Barnes would be very pleased to get your feedback about our services
</div>
</div>
<form class="feedback">
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="firstName">First Name *</label>
<input type="text" class="form-control" id="firstName" name="firstName" required>
<p class="help-block">Please enter your first name.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="lastName">Last Name *</label>
<input type="text" class="form-control" id="lastName" name="lastName" required>
<p class="help-block">Please enter your last name.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="email">Email *</label>
<input type="email" class="form-control" id="email" name="email" required>
<p class="help-block">Please enter your email address.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="country">Country *</label>
<select class="form-control" id="country" name="country" required></select>
<p class="help-block">Please enter your country.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">What brings you to Calgary? * <input class="hidden-radio-button" id="reasonForVisiting_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="vacation" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Vacation
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="business" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Business
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="liveHere" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Live Here
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="reasonForVisiting_other" group="reasonForVisiting" onclick="reasonForVisiting_checked(); reasonForVisiting_otherChecked()">Other
<input type="text" class="form-control" style="display: none;" id="reasonForVisiting_otherDetails" name="reasonForVisiting" placeholder="Please provide your reason for visiting Calgary.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">How did you hear about us? * <input class="hidden-radio-button" id="hearAboutUs_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="searchEngine" group="hearAboutUs" onclick="hearAboutUs_checked()">Search Engine
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="friends" group="hearAboutUs" onclick="hearAboutUs_checked()">Friends
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="magazines" group="hearAboutUs" onclick="hearAboutUs_checked()">Magazines
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="newspapers" group="hearAboutUs" onclick="hearAboutUs_checked()">Newspapers
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="billboards" group="hearAboutUs" onclick="hearAboutUs_checked()">Billboards
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="television" group="hearAboutUs" onclick="hearAboutUs_checked()">Television
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="hearAboutUs_other" group="hearAboutUs" onclick="hearAboutUs_checked(); hearAboutUs_otherChecked()">Other
</div>
<div class="col-sm-6 col-xs-12">
<input type="text" class="form-control" style="display: none;" id="hearAboutUs_otherDetails" name="hearAboutUs" placeholder="Please provide how you heard about us.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label>Please give us a rating. *</label>
<hr style="margin-top: 5px;" />
<div class="form-group col-sm-6 col-xs-12">
Rate our service. <input class="hidden-radio-button" id="service_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="service-star-1" class="star" onclick="starClicked('service', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="service-star-2" class="star" onclick="starClicked('service', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="service-star-3" class="star" onclick="starClicked('service', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="service-star-4" class="star" onclick="starClicked('service', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="service-star-5" class="star" onclick="starClicked('service', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="serviceRating" name="serviceRating" value=0>
</div>
</div>
<div class="form-group col-sm-6 col-xs-12">
Rate our site. <input class="hidden-radio-button" id="site_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="site-star-1" class="star" onclick="starClicked('site', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="site-star-2" class="star" onclick="starClicked('site', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="site-star-3" class="star" onclick="starClicked('site', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="site-star-4" class="star" onclick="starClicked('site', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="site-star-5" class="star" onclick="starClicked('site', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="siteRating" name="siteRating" value=0>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label for="comments">Your comments would be most appreciated. Thank you! *</label>
<textarea class="form-control comments" id="comments" name="comments" rows="10" required></textarea>
</div>
</div>
<input type="hidden" class="form-control" id="recipientEmail" value="@Model.Content.Email" />
<div class="form-group">
<button type="submit" class="btn btn-primary pull-left submit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing" id="submit">Submit</button>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 submissionError">
There was a problem submitting your feedback. Please try again later.
</div>
</div>
</form>
</div>
</div>
</section>
Here is a JSFiddle demonstrating the problem:
https://jsfiddle.net/gib65/j1ar87yq/
回答1:
Try using an arrow function so that this is bound to your callback correctly.
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", () => {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});
来源：https://stackoverflow.com/questions/57826858/calling-scrollintoview-with-block-center-not-working