您的位置：首页 > Web前端 > JQuery

【jQuery】文本框的focus和blur事件

2015-12-17 14:37 573 查看

focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。

例如，在触发文本框的“focus”事件时，<div>元素显示提示内容，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击文本框时，触发文本框的“focus”事件，在该事件中，页面中的<div>元素显示提示信息。

示例：自绑定文本框的blur事件，并在该事件中检测文本框的内容是否为空，如果为空，则在<div>元素中提示相应信息。

程序：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>表单中文本框的focus和blur事件</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h3>表单中文本框的focus和blur事件</h3>

<input id="txtest" type="text" value="" />

<div></div>

<script type="text/javascript">

$(function () {

$("input")

.bind("focus", function () {

$("div").html("请输入您的姓名！");

})

.bind("blur",function () {

if ($(this).val().length == 0)

$("div").html("你的名称不能为空！");

})

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航