Home > Article > Web Front-end > jquery focus disappears and hides
jquery focus disappears and hides
- PHPzOriginal
- 2023-05-14 11:08:37506browse
In web design, focus disappearing and hiding is a common effect. We can easily achieve this effect by writing code using jQuery. In this article, we will introduce how to use jQuery to achieve the effect of disappearing focus and provide some sample code.
What is focus disappearing and hiding?
In web design, focus disappearing and hiding is a common effect. When we enter information or select an option in an interactive control such as an input box or tab, some prompts or operation menus usually appear. When we leave the control and move the focus to other locations, these prompts or operation menus will automatically disappear. The purpose of this effect is to improve the visual clarity and beauty of the page.
How to use jQuery to achieve focus disappearance and hiding?
To achieve the focus disappearing and hiding effect, we can use jQuery to write code. The following is a sample code to achieve this effect:
<!DOCTYPE html>
<html>
<head>
<title>jQuery 焦点消失隐藏示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#inputBox").focus(function(){
$("#tipBox").removeClass("hidden");
}).blur(function(){
$("#tipBox").addClass("hidden");
});
});
</script>
</body>
</html>The above code demonstrates an example of an input box and a prompt box. When the user enters information in the input box, the prompt box displays the corresponding information. When the user leaves the input box, the prompt box automatically disappears.
In the code, we use jQuery’s focus and blur methods. When the input box gets focus, we use the removeClass method to delete the hidden class of the prompt box so that it is displayed on the page. When the user leaves the input box, we use the addClass method to add the hidden class so that the prompt box is automatically hidden.
We also define a hidden class and use the display: none; attribute to set the prompt box to be initially hidden. In this way, when the user enters the page for the first time, the prompt box will be hidden by default.
Other sample code
In addition to the above sample code, we also provide some other focus disappear hiding sample code for your reference:
Tab Tips
<!DOCTYPE html>
<html>
<head>
<title>选项卡提示</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.tip {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
padding: 5px;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="tab active">选项卡1</li>
<li class="tab">选项卡2</li>
<li class="tab">选项卡3</li>
</ul>
<div class="tip active">选项卡1的提示信息</div>
<div class="tip">选项卡2的提示信息</div>
<div class="tip">选项卡3的提示信息</div>
<script>
$(document).ready(function(){
$(".tab").mouseover(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("hidden").addClass("active");
}).mouseout(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("active").addClass("hidden");
});
});
</script>
</body>
</html>The above code demonstrates an example of a tab prompt. When the user hovers the mouse over a tab, the corresponding tooltip appears on the page. When the user moves the mouse out of the tab, the prompt box automatically disappears.
In the code, we use jQuery’s mouseover and mouseout methods. We use the removeClass method to remove the hidden class of the tooltip and add the active class to make it visible on the page when the mouse is hovering over the tab. When the mouse moves out of the tab, we use the removeClass method to delete the active class and add the hidden class to make the prompt box automatically hide.
Input box and button
<!DOCTYPE html>
<html>
<head>
<title>输入框和按钮示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<button id="btn">提交</button>
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var inputValue = $("#inputBox").val();
if(inputValue === ""){
$("#tipBox").removeClass("hidden");
}else{
$("#tipBox").addClass("hidden");
}
});
});
</script>
</body>
</html>The above code demonstrates an example of input box and button. When the user clicks the submit button, if the input box is empty, a prompt box will be displayed on the page. Otherwise, the prompt box will disappear automatically.
In the code, we use jQuery’s click method. When the user clicks the submit button, we use the val method to get the content of the input box and determine whether it is empty. If it is empty, we use the removeClass method to delete the hidden class of the prompt box so that it can be displayed on the page. Otherwise, we use the addClass method to add the hidden class so that the prompt box is automatically hidden.
Conclusion
Focus disappearing and hiding is a common effect in web design. We can easily achieve this effect by writing code using jQuery. In this article, we introduce the knowledge about disappearing focus and provide some example code. If you want to achieve the focus disappearing and hiding effect, you can refer to the code provided in this article and make corresponding modifications and adjustments.
The above is the detailed content of jquery focus disappears and hides. For more information, please follow other related articles on the PHP Chinese website!