When testing on a mobile terminal such as the iPhone, we will find that the onclick event has a delay of about half a second. This is because the iOS system needs to wait for a while to determine whether the user is clicking or dragging, so there will be a conflict between out of focus and click events.
Problem Description:
After setting an out-of-focus event for an input box, the out-of-focus event is always triggered first by other events, which makes clicking the submit button invalid after the input is completed.
Extension: ①mousedown: Triggered when the user presses any mouse button. This event cannot be triggered by the keyboard.
②mouseup: Triggered when the user releases the mouse button. This event cannot be triggered by the keyboard.
solution:
Method 1. Set a delay trigger for the out-of-focus event.
Method 2. Change the click event of the button to a mousedown event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
.father{
width: 500px;
height: 300px;
background: green;
padding-top: 20px;
}
.father input {
width: 120px;
height: 28px;
border: 1px solid blue;
}
.father button{
width: 60px;
height: 28px;
margin-left: 10px;
}
</style>
<script>
function btn() {
alert("you click it");
}
</script>
</head>
<body>
<div class="father" id="father" tabindex="1">
<input id="testInput" placeholder="请输入您的信息"><button id="testBtn" onclick="btn()">提交</button>
</div>
</body>
<script>
// 鼠标按下事件
$("#testBtn").mousedown(function(){
alert("my button mousedown");
});
// 输入框失焦事件
$("#testInput").blur(function(){
alert("now blur ~~~");
});
// 输入框失焦事件 延迟触发
// $("#testInput").blur(function(){
// setTimeout(function(){
// alert("now blur ~~~");
// }, 300)
// });
</script>
</html>
项目里还遇到一个问题，这里我是需要点击input框，弹出一个时间选择框。在IOS上发现点击input框后弹出时间选择框时，input会有焦点
$('#startDate').mousedown(function(e) {
setTimeout(function(){
$("#startDate").blur();
}, 10);
});
.