井井客

搜索

input鼠标点击时换样式

这次有时间重新整理一下关于input鼠标点击换样式以达到变换背景图片的效果,主要是input鼠标获取焦点和离开焦点,分别做了对应的样式来区分,可以很好的应用到互联网上。

input鼠标点击时换样式

综合代码如下:

<!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>input鼠标点击与移开时</title>
<style>
input { width:194px; height:18px; overflow:hidden; padding-left:6px;}
input.input01 { background:url(http://www.jingjingke.com/res/img/ceshi.gif) 0 0 no-repeat;} /* 默认时 做了一个动图做背景 */	
input.input02 { background:#e7fbec;}  /* 当鼠标点击时 */
input.input03 { background:none;}	/* 鼠标移开时并且填了值 */
</style>
</head>
<body>
<input type="text" class="input01" value="" id="getInput" />
<script>
var getInput = document.getElementById('getInput');
getInput.onfocus=function(){
	getInput.className = 'input02';
}
getInput.onblur = function(){
	if(getInput.value==''){
		getInput.className = 'input01';
	}else{
		getInput.className = 'input03';
	}
}
</script>
</body>
</html>

主要来讲这是一个CSS+JS综合的应用,生成后,可以看到input鼠标点击时换样式的效果。

首页是给鼠标定义了三种样式分别:input01,input02,input03;然后javascript代码根据onfocus(获取焦点)、onblur(离开焦点)这两种状态把三种样式分别应用
获取焦点时,应用相应的样式
失去焦点时,有两种情况
(1)在input中没有添加字??调用初始的动图背景样式
(2)在input中有添加文字??调用空白背景图样式

文章TAG:CSS,js

作者:井井客整理来源:原创
本文标题:input鼠标点击时换样式
本文链接:/c/2712.html

上一篇:一段话解决flash遮住导航下拉的问题
下一篇:html页面底部多出文字

文章分类

相关阅读

随便看看