文本框的应用--获得焦点和失去焦点

<html>
<head>
<style type="text/css">
	.focus{
		border:1px solid #f00;
		background:#fcc;
	}
</style>
<script src="jquery-1.11.2.js"></script>
<script>
	$(function(){
		$(":input").focus(function(){
			$(this).addClass("focus");

		}).blur(function(){
			$(this).removeClass("focus");

		});

	});
</script>
</head>
<body>
	<form action="#" method="POST" id="regForm">
		<fieldset>
			<legend>个人信息</legend>
			<div>
				<label for="username">名称:</label>
				<input id="username" type="text">
			</div><br/>
			<div>
				<label for="pass">密码:</label>
				<input id="pass" type="password">
			</div><br/>
			<div>
				<label for="msg">详细信息:</label>
				<textarea id="msg"></textarea>
			</div>
		</fieldset>
	</form>
</body>
</html>

浏览器都兼容。

input:focus, textarea:focus{

border:1px solid #f00;

background:#fcc;

}以上的写法,IE6不支持。

时间: 2024-08-29 12:58:06

文本框的应用--获得焦点和失去焦点的相关文章

js 判断一个文本框是否获得焦点

1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素 // 查找你要判断的文本框 var myInput = document.getElementById('myInput'); if (myInput == document.activeElement) {     alert('获取焦点'); } else {     alert('未获取焦点'); } 2.文本框获取焦点后

c# winform 设置winform进入窗口后在文本框里的默认焦点

http://www.cnblogs.com/JuneZhang/archive/2011/04/19/2020585.html 进入窗口后默认聚焦到某个文本框,两种方法: ①设置tabindex 把该文本框属性里的tabIndex设为0,焦点就默认在这个文本框里了. ②Winform的Activated事件 在Form的Activated事件中添加textBox1.Focus(), 即可获得焦点. ? private void Form1_Activated(object sender, Ev

layer.js V3.0.1 文本框自动获得焦点 修改为 不自动获得焦点

未修改前样式 它的文本框弹出以后,文本框获得焦点在文字的最前面,这不是一个好的用户体验,所以对它进行修改 对layer.js文件进行修改,在layer.js中搜索focus,发现共有两处focus 经过测试,删除阴影部分的代码即可做到文本框不对焦

javascript当文本框获得焦点设置边框

javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通过一个简单的实例介绍一下,以便需要的朋友进行扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>文本框获得焦点边框变

360浏览器文本框获得焦点后被软键盘遮罩的问题

场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了.截图如下                      (未获取软键盘焦点的情况)               (chrome浏览器调起软键盘的情况)            (360浏览器调起软键盘情况) 那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文  中文(网上找的) 经过简单的了解,大

当文本框失去焦点即进行表单验证简单实例

当文本框失去焦点即进行表单验证简单实例:不少的表单验证都有这样的功能,就是当鼠标焦点离开文本框的时候,即刻进行合法性验证,下面就通过一个实例简单介绍一下如何实现此功能,代码实例如下: <script type="text/javascript"> function onblurs(){ if(myform.name.value==""){ alert("姓名不得为空!"); } else if(myform.address.value

万恶的IE之 文本框没法获得焦点

万恶的ie在使用iframe,移除iframe后导致页面元素无法聚焦,文本框没法获得焦点,文字也不能选中,搜索原因如下: “ IE 下在移除父层的 DIV 的时候,也就是 IFrame 外层的 DIV 的时候,IE 并没有将内部的 IFrame 从 DOM 中移除,而下次触发函数创建此 IFrame 的时候,使会产生 DOM 冲突,所以解决方法就是在移除父层的 DIV 的时候,先将内部的 IFrame 也移除,于是问题解决了..” 经过测试 解决方案为: 把iframe的src设置为src="&

jquery注册文本框获取焦点清空,失去焦点赋值

在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script> &

JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, JavaScript Code复制内容到剪贴板 //这样执行,jquery只会当获取焦点后执行焦点函数的语句了. $(”#nameInput”).focus(); 可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象,这样的话$(”#nameInp

javaScript:让文本框内的最后一个文字的后面获得焦点

//当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myid).focus();// 获取焦点 }else{ setFocus.call(document.getElementById(myid)); } } var isNav = (window.navigator.appName.toLowerCase().indexOf("netscape"