问题:输入框后有个情况按钮,点击内容清空,按钮消失。输入框blur 按钮也消失。造成点击按钮内容不动,按钮先消失。原因:先执行的blur。click改为 mousedown 或 ontouchstar
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
position: relative;
display: inline-block;
}
.ipt {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 10px;
padding-right: 30px;
position: relative;
/* outline: rgb(186, 18, 127); */
}
.ipt:focus {
outline: 2px solid red; /* 修改获取焦点时的轮廓颜色为红色 */
}
.active::after {
display: block;
}
.clear-ipt {
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
text-align: center;
line-height: 30px;
display: none;
z-index: 10;
cursor: pointer;
}
.out {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="out">
<span>姓名</span>
<input type="text" class="ipt" />
<div class="clear-ipt">X</div>
</div>
<div class="out">
<span>姓名</span>
<input type="text" class="ipt" />
<div class="clear-ipt">X</div>
</div>
<div class="out">
<span>姓名</span>
<input type="text" class="ipt" />
<div class="clear-ipt">X</div>
</div>
</body>
</html>
<script>
let clearIpt = document.querySelectorAll('.clear-ipt');
let ipt = document.querySelectorAll('.ipt');
ipt.forEach((item, index) => {
item.onfocus = () => {
if (item.value) {
clearIpt[index].style.display = 'block';
}
};
item.oninput = () => {
if (item.value) {
clearIpt[index].style.display = 'block';
}
};
item.onblur = () => {
clearIpt[index].style.display = 'none';
};
/** 阻止事件冒泡 保持focus */
/**
* 通过将清空按钮的事件处理程序设置为 onmousedown | ontouchstart 而不是 onclick,我们可以在更早的阶段捕获到鼠标按下的事件。默认情况下,点击输入框会导致输入框失去焦点,并触发 blur 事件,从而隐藏清空按钮。但是,通过在 mousedown 事件处理程序中返回 false,我们可以阻止后续的鼠标事件和默认行为,即输入框失去焦点。因此,使用 onmousedown 事件处理程序并返回 false 可以有效地阻止输入框在点击清空按钮时触发 blur 事件,从而实现清空按钮功能而不隐藏。
* 当鼠标在页面上执行操作时,会触发多种不同类型的事件,这些事件的触发顺序通常如下:
mousedown:鼠标按钮被按下。
mouseup:鼠标按钮被释放。
click:鼠标按钮被按下并释放(这是一个组合事件,等效于 mousedown + mouseup)。
mouseover:鼠标指针移入元素。
mouseout:鼠标指针移出元素。
mousemove:鼠标指针在元素内部移动。
*/
clearIpt[index].ontouchstart = () => {
item.value = '';
clearIpt[index].style.display = 'none';
return false;
};
clearIpt[index].onmousedown = () => {
item.value = '';
clearIpt[index].style.display = 'none';
return false;
};
});
</script>