Jquery焦点与失去焦点示例应用

代码如下:

$(function(){
$("#input").focus(function(){//#input换成你的input的ID
//这里写获得焦点之后运行的代码。
}).blur(function(){
//$(".scroll-question").css("display","none");
});
})

})

live要1.4才支持，以下ie，firefox都没问题


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="/js/jquery-1.4.4.js"></script>
<script>
$(document).ready(function()
{
$("#nameBefore").dblclick(function()
{
$("#nameBefore").replaceWith("<div id='nameIn'><input type='text' name='nameInVal' id='nameInVal' value='In' /></div>");
}
);
//失去焦点以后
$("#nameInVal").live("blur",function()
{
alert('nameInVal已失去焦点');
}
);
}
);
</script>
</head>
<body>
<form name="testfm" method="post" action="save.php">
<table>
<tr><td>1</td><td><div id='nameBefore'>Before</div></td></tr>
</table>
</form>
</body>
</html>

赞 (0)

相关推荐

  • jQuery表单获取和失去焦点输入框提示效果的实例代码

    复制代码 代码如下: $("#focus .input_txt").each(function(){  var thisVal=$(this).val();  //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示  if(thisVal!=""){  $(this).siblings("span").hide();  }else{  $(this).siblings("span").show();  }  //聚焦

  • JQuery中使文本框获得焦点的方法实例分析

    本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • JQuery设置文本框和密码框得到焦点时的样式

    复制代码 代码如下: //设置文本框和密码框得到焦点时的样式 $("#tblReg input[type=text],#tblReg input[type=password]").focus(function () { $(this).addClass("myFocus"); }).blur(function () { $(this).removeClass("myFocus"); }); 注意中间用逗号隔开

  • jQuery 文本框得失焦点的简单实例

    版本一 css代码部分: 复制代码 代码如下: .focus {      border: 1px solid #f00;     background: #fcc;} 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: <body>    <form action="" method="post" id="regForm">        <fieldset&

  • jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

    复制代码 代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); } 把焦点光标移动到id的文本最后. jquery获取焦点后光标在字符串后,当input获得焦点后,自动把光标移到文本内容的最后,jQuery用focus()使文本输入框获得焦点且焦点在文字的最右的方法 复制代码 代码如下: //获取焦点后光标在字符串后 //其原理就

  • 在js(jquery)中获得文本框焦点和失去焦点的方法

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 相关js代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&

  • jQuery实现的自适应焦点图效果完整实例

    jQuery实现的自适应焦点图效果完整实例

    本文实例讲述了jQuery实现的自适应焦点图效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,

  • jQuery的图片滑块焦点图插件整理推荐

    jQuery的图片滑块焦点图插件整理推荐

    1.jQuery实现的右侧选项卡焦点图片轮播动画 jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击,是一段不错的焦点图切换代码. 在线演示 源码下载 2.jquery实现的网页缩略图大纲可滑动显示动态 query实现的网页缩略图大纲可滑动显示动态特效源码,是一款拥有网页大纲的缩略图显示的代码,点击滑动缩略图即可看到想要的东西,支持鼠标点击.拖动及鼠标滚动切换显示. 在线演示 源码下载 3.纯CSS3实现的自定义美化UL OL列表的3种发

  • jquery实现用户登陆界面(示例讲解)

    jquery实现用户登陆界面(示例讲解)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> var cnresu = false; $(function(){

  • 文本框获得焦点和失去焦点的判断代码

    文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id

  • Jquery 自定义动画概述及示例

    animate(params, options) 返回值:jQuery 概述 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值

  • js和jquery实现监听键盘事件示例代码

    js和jquery实现监听键盘事件示例代码

    项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e

  • jquery-1.2.6得到焦点与失去焦点的写法

    jquery-1.2.6得到焦点与失去焦点的写法 $(function(){ $("input:text,input:password,textarea").focus(function(){$(this).css("background","#CBFE9F");}).blur(function(){$(this).css("background","#FFF");}); }); [Ctrl+A 全选 注:

  • Jquery焦点与失去焦点示例应用

    复制代码 代码如下: $(function(){ $("#input").focus(function(){//#input换成你的input的ID //这里写获得焦点之后运行的代码. }).blur(function(){ //$(".scroll-question").css("display","none"); }); }) }) live要1.4才支持,以下ie,firefox都没问题 复制代码 代码如下: <!

随机推荐