<input type="text" id="tel">
<script>
document.addEventListener("blur", function(){
console.log("my document blur");
});
var ipt = document.getElementById("tel");
ipt.addEventListener("blur", function(){
console.log("my input blur");
});
</script>
// 输出结果:document为非表单元素
my input blur
<input type="text" id="tel">
<script>
document.addEventListener("click", function(){
console.log("my document click");
});
var ipt = document.getElementById("tel");
ipt.addEventListener("click", function(){
console.log("my input click");
});
</script>
// 输出结果:
my input click
my document click
<input type="text" id="ipt">
<input type="button" id="btn" value="点我">
<script>
var ipt = document.getElementById("ipt");
ipt.addEventListener("blur", function(){
console.log("my input blur");
});
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
console.log("my button click");
});
</script>
// 输出结果:
my input blur
my button click
<!-- DOM结构示意 -->
<input type="text" placeholder="请选择姓氏" readonly>
<div class="search-list" data-status="hide">
<ul>
<li><a href="javascript:">赵</a></li>
<li><a href="javascript:">钱</a></li>
<li><a href="javascript:">孙</a></li>
<li><a href="javascript:">李</a></li>
</ul>
</div>
/** 说明:
* 目前通过ul外层div自定义属性“data-status”控制其是否显示
*/
(function($){
$("input").focus(function(){
// input框获取焦点,展示下拉框
$(".search-list").attr("data-status", "show");
}).blur(function(){
// input框失去焦点,隐藏下拉框
$(".search-list").attr("data-status", "hide");
});
// 选择对应选项,并赋值给input框
$(".search-list li a").click(function(){
console.log("执行");
$("input").val($(this).text());
});
})(jQuery);
(function($){
$("input").focus(function(){
// input框获取焦点,展示下拉框
$(".search-list").attr("data-status", "show");
}).blur(function(){
setTimeout(function(){
// input框失去焦点,隐藏下拉框
$(".search-list").attr("data-status", "hide");
}, 300);
});
// 选择对应选项,并赋值给input框
$(".search-list li a").click(function(){
console.log("执行");
$("input").val($(this).text());
});
})(jQuery);
<input type="text" id="ipt">
<input type="button" id="btn" value="点我">
<script>
var ipt = document.getElementById("ipt");
ipt.addEventListener("blur", function(){
console.log("my input blur");
});
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function(){
console.log("my button mousedown");
});
</script>
// 输出结果:
my button mousedown
my input blur
<input type="button" id="btn" value="点我">
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function(){
console.log("my button mousedown");
});
btn.addEventListener("click", function(){
console.log("my button click");
});
btn.addEventListener("mouseup", function(){
console.log("my button mouseup");
});
输出结果:
my button mousedown
my button mouseup
my button click
(function($){
$("input").focus(function(){
// input框获取焦点,展示下拉框
$(".search-list").attr("data-status", "show");
}).blur(function(){
// input框失去焦点,隐藏下拉框
$(".search-list").attr("data-status", "hide");
});
// 选择对应选项,并赋值给input框
$(".search-list li a").mousedown(function(){
$("input").val($(this).text());
});
})(jQuery);
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有