Web Front-end
JS Tutorial
Quick solution to the conflict between onclick and onblur_javascript skills
Quick solution to the conflict between onclick and onblur_javascript skills
There is a drop-down box using ajax in the search box on Sina homepage. We need to achieve the effect of clicking an item in the drop-down box so that the value in the search box changes to this item and the drop-down box disappears. But at the same time, when clicking elsewhere, the drop-down box also disappears. Approximately as shown in the picture:
We use onblur and onclick at the same time to hide the drop-down box, but a bigger problem arises. These two functions conflict. Onblur is too powerful and there is no chance of implementing the onclick method. The search box cannot obtain the content of the clicked item. This is the conflict between onclick and onblur that we want to solve.
Corresponding to this problem, here we introduce two solutions:
1. Use setTimeout to delay the execution of onblur time, so that onblur is executed after onclick is executed. (The time setting of setTimeout should be above 100ms, otherwise it still won’t work) The sample code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
form{
width:500px;
margin:0 auto;
position:relative;
zoom:1;
}
form:after{
clear:both;
content:"";
display:block;
}
.text{
float:left;
border:1px solid #cccccc;
padding-left:14px;
width:300px;
height:34px;
line-height:34px;
font-size:14px;
}
.button{
width:50px;
height:34px;
border:1px solid #cccccc;
line-height:34px;
font-size:14px;
color:#ffffff;
background:#ff8400;
}
ul{
position:absolute;
top:36px;
left:0;
width:300px;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
background:green;
display:none;
}
li{
font-size:14px;
line-height:34px;
height:34px;
color:#000000;
border-bottom:1px solid #cccccc;
}
li:hover{
background:yellow;
color:red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
var oText=document.getElementById('text');
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var timer=null;
oText.onfocus=function(){
this.value='';
oUl.style.display='block';
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
clearTimeout(timer);
oText.value=this.innerHTML;
oUl.style.display='none';
};
}
};
oText.onblur=function(){
timer=setTimeout(function(){
oUl.style.display='none';
if(!oText.value){
oText.value='请输入关键字';
}
},120);
};
};
</script>
</head>
<body>
<form>
<input type="text" value="请输入关键字" id="text" class="text"/>
<input type="button" value="搜索" class="button"/>
<ul id="ul">
<li>返回窗口是否已被关闭</li>
<li>返回窗口的文档显示区的高度</li>
<li>返回窗口的文档显示区的宽度。</li>
<li>设置或返回窗口的名称。</li>
<li>返回窗口的外部高度。</li>
</ul>
</form>
</body>
</html>2. Use document.onmousedown instead of onblur to hide the drop-down box function
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
form{
width:500px;
margin:0 auto;
position:relative;
zoom:1;
}
form:after{
clear:both;
content:"";
display:block;
}
.text{
float:left;
border:1px solid #cccccc;
padding-left:14px;
width:300px;
height:34px;
line-height:34px;
font-size:14px;
}
.button{
width:50px;
height:34px;
border:1px solid #cccccc;
line-height:34px;
font-size:14px;
color:#ffffff;
background:#ff8400;
}
ul{
position:absolute;
top:36px;
left:0;
width:300px;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
background:green;
display:none;
}
li{
font-size:14px;
line-height:34px;
height:34px;
color:#000000;
border-bottom:1px solid #cccccc;
}
li:hover{
background:yellow;
color:red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
var oText=document.getElementById('text');
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var timer=null;
oText.onfocus=function(){
this.value='';
oUl.style.display='block';
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
clearTimeout(timer);
oText.value=this.innerHTML;
oUl.style.display='none';
};
}
};
document.onmousedown=function(ev){
var oEvent=ev||event;
var target=oEvent.target||oEvent.srcElement;
if(target.parentNode!==oUl&&target!==oText){
oUl.style.display='none';
}
};
oText.onblur=function(){
if(!oText.value){
oText.value='请输入关键字';
}
};
};
</script>
</head>
<body>
<form>
<input type="text" value="请输入关键字" id="text" class="text"/>
<input type="button" value="搜索" class="button"/>
<ul id="ul">
<li>返回窗口是否已被关闭</li>
<li>返回窗口的文档显示区的高度</li>
<li>返回窗口的文档显示区的宽度。</li>
<li>设置或返回窗口的名称。</li>
<li>返回窗口的外部高度。</li>
</ul>
</form>
</body>
</html>The quick solution to the onclick and onblur conflict problem mentioned above is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Guide to uninstalling the NumPy library to avoid conflicts and errors
Jan 26, 2024 am 10:22 AM
The NumPy library is one of the important libraries in Python for scientific computing and data analysis. However, sometimes we may need to uninstall the NumPy library, perhaps because we need to upgrade the version or resolve conflicts with other libraries. This article will introduce readers to how to correctly uninstall the NumPy library to avoid possible conflicts and errors, and demonstrate the operation process through specific code examples. Before we start uninstalling the NumPy library, we need to make sure that the pip tool is installed, because pip is the package management tool for Python.
How to resolve Win11 wallpaper screen conflict
Jun 29, 2023 pm 01:35 PM
How to solve Win11 wallpaper screen conflict? Recently, some users have experienced a black screen after installing some wallpaper software on their computers. This is most likely caused by wallpaper-screen conflicts. So how should this situation be solved? Let’s take a look at the solution to the problem of wallpaper screen conflict in Windows 11 system. Solution to the problem of wallpaper screen conflict in win11 system 1. Open the window in the settings option of the desktop. 2. Click the Run New Task button under the File menu. 3. Enter explorer.exe in the new task pop-up box, click OK to save and restart the resource manager.
How to resolve hotkey conflicts
Feb 23, 2024 am 08:12 AM
How to Solve Hotkey Conflicts With the advancement of computer technology, we often encounter the problem of hotkey conflicts when using computers. Hot keys refer to realizing a certain operation or function through key combinations or individual function keys on the keyboard. However, different software and systems have different definitions of hotkeys, which leads to the problem of hotkey conflicts. When we press a hotkey, it may trigger unexpected functionality, or nothing may happen at all. In order to solve this problem, I will introduce to you several common hotkey conflict resolution methods below. The first solution
How to use onclick in HTML
Nov 13, 2023 am 10:07 AM
By setting the onclick attribute to a JavaScript function or behavior, you can perform an action when the user clicks on an element. Whether you use the onclick attribute directly in the HTML tag or dynamically add and modify the onclick attribute through JavaScript, you can handle click events.
Reasons and solutions for unable to enable win11 input method
Jan 05, 2024 pm 12:22 PM
After updating to win11 system, some users find that their Chinese input method has changed to x and cannot be used. In fact, this is because we are in a position where the input method cannot be used. We only need to enter a place where the input method can be used to solve the problem. Why is the input method disabled in win11: Answer: Because it is in a position where input is not possible. 1. Generally, this situation occurs when viewing the desktop. 2. Because most of the time, we cannot enter text on the desktop. 3. So we only need to come to the place where text can be entered to solve the problem. 4. Various input locations such as QQ, WeChat, documents, notepad, and web pages can solve the problem of disabled input methods.
MySQL MVCC principle revealed: How to deal with read and write conflicts in concurrent transactions?
Sep 08, 2023 am 08:37 AM
MySQLMVCC principle revealed: How to deal with read and write conflicts in concurrent transactions? Introduction: In database systems, concurrent execution of transactions is essential. However, concurrent execution also brings a series of problems, one of which is read and write conflicts. When multiple transactions read and write the same data at the same time, inconsistencies may occur. To solve this problem, MySQL introduced the multi-version concurrency control (MVCC) mechanism. This article will reveal the principle of MVCC and analyze in detail how MySQL handles the read and write conflicts of concurrent transactions.
What to do if there is a driver conflict in win10 latest version 1909
Jan 07, 2024 pm 12:45 PM
For the updated win101909 system, some friends discovered that the 1909 driver is incompatible and has driver conflicts during use. The editor thinks that in this case, you can try to update the driver or restore to an older version of the driver to solve the problem. Let’s take a look at how to do it. How to solve the win101909 driver conflict. Method 1. Find the "This PC" icon on the desktop and right-click it. After clicking, a menu will pop up, select "Properties" 2. After opening the window, find and click the "Device Manager" button on the left side of the window 3. Find the graphics card model item under "Display Adapter", right-click, and select Select "Update Driver" from the menu 4. After clicking, select "Automatic Search" in the new pop-up window.
Solve the conflict problems that may be caused by using Zepto and jQuery at the same time
Feb 24, 2024 pm 06:36 PM
How to correctly handle potential conflicts when using Zepto and jQuery? In front-end development, we often encounter situations where we need to use Zepto and jQuery at the same time. However, due to some differences in implementation between the two, potential conflicts sometimes arise. This article will guide you on how to correctly handle conflicts when using Zepto and jQuery, and provide specific code examples. 1. Introducing Zepto and jQuery First, we need to introduce Zepto and jQue into the project at the same time
