What's the blur event in Html?

 What's the blur event in Html?

In HTML, the blur event is triggered when an element loses focus. This means that the element is no longer selected or active, and the user is no longer interacting with it.

The blur event is commonly used in forms, where it can be used to validate input or trigger certain actions when the user moves away from a form field. For example, a form may have a blur event handler attached to a text input field that checks the input for errors when the user moves away from the field.

Here is an example of how the blur event can be used in an HTML form:

<form>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" onblur="validateEmail()"><br>
  <input type="submit" value="Submit">
</form>

In this example, the blur event is attached to the email input field using the onblur attribute. When the user moves away from the field, the validateEmail() function is called, which checks the input for errors. If any errors are found, the function can display an error message or highlight the input field to indicate the problem. This is just one example of how the blur event can be used in an HTML form.

 

Set a default focus on login page

To set a default focus on a login page, you can use the autofocus attribute on the <input> element that you want to focus by default. Here is an example:

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" autofocus><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="Login">
</form>

In this example, the autofocus attribute is added to the username input field. When the page loads, the username field will automatically be focused, and the user can begin typing their username without needing to click on the field. This can make the login process more efficient and user-friendly.

Note that the autofocus attribute should only be used on one <input> element per page, as only one element can be focused by default. Additionally, the autofocus attribute is not supported in all browsers, so it is a good idea to test your page in different browsers to make sure it works as expected.

 

Can you fix the wrong css

.error_tip { float: left; height: 30px; line-height: 30px; margin-left: 70px; color: #e62e2e; display: none; }

 

To fix the CSS styles for the .error_tip class, you can remove the float: left and display: none styles, and add some additional styles to control the position and size of the error message element. Here is an updated version of the .error_tip class that you can use:

.error_tip {
  position: absolute; /* position the error message absolutely */
  top: 50%; /* position the error message 50% down from the top of the input field */
  left: 0; /* align the error message with the left edge of the input field */
  width: 100%; /* make the error message the same width as the input field */
  height: 30px; /* set the height of the error message */
  line-height: 30px; /* center the text vertically within the error message */
  margin-left: 70px; /* add some left margin to the error message */
  text-align: center; /* center the text within the error message */
  color: #e62e2e; /* set the text color to red */
}

This updated version of the .error_tip class removes the float and display styles, which were causing problems with the layout of the error message element. It also adds some additional styles to control the position and size of the error message element, and to format the text within it.

By using these updated styles, you should be able to fix the layout issues and display the error message correctly.

 

 

作者:Chuck Lu    GitHub