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

来源：互联网发布：怎么做软件程序编辑：程序博客网时间：2024/05/16 09:02

今天做了一个通过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;
    }
}