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

通过JS实现文本框获得输入焦点时的状态

2007-12-18 09:21 393 查看

今天做了一个通过JS处理，让页面上的文本框都会有当获得输入焦点（onfocus）时改变状态的效果，这样的效果是对用户体验的提高是很有利的，因为操作者可以很清晰的看到哪个正在输入哪个地方，尤其是在内容过多的情况下。
这个算是投石引玉啦，可以大家可以试着讨论一些新的效果，像如何通过更简单的方法给每个框加上动态显示的提示文字等，呵呵
不多说，看到一下图:

AutoFormStyle:

HTML代码：

<!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>AutoFormStyle - Example - Signup</title>
<style type="text/css" media="all">@import 'styles/autoformstyle.css';</style>
<script type="text/javascript" src="scripts/autoformstyle.js"></script>
</head>

<body>
<div class="form">
<h2>Create a Blog</h2>
<ul>
<li><label><span>*</span>Username</label><input type="text" style="width:220px;" /></li>
<li><label><span>*</span>Password</label><input type="password" style="width:220px;" /></li>
<li><label><span>*</span>Confirm Password</label><input type="password" style="width:220px;" /></li>
<li><label><span>*</span>Blog Title</label><input type="text" style="width:320px;" /></li>
<li><label><span>*</span>Country</label><select><option>China</option><option>Unitid State</option></select></li>
<li><label>About You</label><textarea style="width:300px;height:180px;">自动给表单的文本框加上动态事件的效果，用户体验大大地提高了。</textarea></li>
<li><label> </label>Author:<a href="http://huacn.cnblogs.com" target="_blank">Huacn Lee</a> <a href="http://www.wathon.com" target="_blank">Wathon Team</a></li>
<li><label> </label><input type="submit" value="I agree it and create my blog" /></li>
</ul>
<script type="text/javascript">initAutoFormStyle();</script>
</div>
</body>

</html>

CSS代码：

@import 'html.css';
.form
{
text-align:left;
width:500px;
margin:40px auto;
background:#FFF;
border:1px solid #CCC;
padding:10px;
height:500px;
}

.form input{font-size:16px; font-family:vVerdana, Geneva, Arial, Helvetica, sans-serif;}
.form input.text,textarea.text{
padding:2px 4px;
border:1px solid #DDD;
color:#666;
}

.form input.focus,textarea.focus{
padding:2px 4px;
background:#F5FEEB;
border:1px solid #CDFA9C;
color:#666;
}

.form h2{
font-size:32px;
color:#A8DF00;
font-weight:bold;
font-style:italic;
border-bottom:2px dashed #CCC;
padding:6px;
}

.form ul {
list-style-type:none;
margin:0;
padding:8px;
}

.form ul li {
line-height:30px;
padding:2px 0;
clear:both;
}

.form ul li label {
width:140px;
text-align:right;
font-weight:bold;
display:block;
float:left;
margin-right:5px;
color:#555;
}

.form ul li label span{color:red;margin-right:2px; line-height:24px;}

Javascript代码：

//---------------------------------
//自动给表单上的文本框加上动态效果Js
//Author： Huacn Lee
//Version:1.0.0
//http://www.wathon.com
//=================================
var __txtArray;
function initAutoFormStyle()
{
var inputArry;
inputArry = document.getElementsByTagName("input");
textArry = document.getElementsByTagName("textarea");
for(var i=0;i<inputArry.length+textArry.length;i++)
{
var tmpInput = null;
if(i< inputArry.length)
{
tmpInput = inputArry[i];
if(tmpInput.type == 'text' || tmpInput.type == 'password' || tmpInput.type == 'file')
{
setEvent(tmpInput);
}
}
else
{
tmpInput = textArry[inputArry.length - i];
setEvent(tmpInput);
}
}
}

function setEvent(obj)
{
var newClassName = 'text';
var focusClassName = 'focus';
if(obj.style.className != undefined)
{
newClassName = obj.style.className + ' ' + newClassName;
focusClassName = obj.style.className + ' ' + focusClassName;
}
obj.className = newClassName;
obj.onblur = function(){
this.className = newClassName;
}
obj.onfocus =function(){
this.className = focusClassName;
}
}

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

标签：

相关文章推荐

新的分享

章节导航