高亮文本框 | 易学教程

<html>
<head>
    <title>高亮文本框</title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('input[type="text"]').addClass("idleField");
               $('input[type="text"]').focus(function() {
                   $(this).removeClass("idleField").addClass("focusField");
                if (this.value == this.defaultValue){
                    this.value = '';
                }
                if(this.value != this.defaultValue){
                    this.select();
                }
            });
            $('input[type="text"]').blur(function() {
                $(this).removeClass("focusField").addClass("idleField");
                if ($.trim(this.value) == ''){
                    this.value = (this.defaultValue ? this.defaultValue : '');
                }
            });
        });
    </script>
<style type="text/css">
    *{
        margin:0;
        padding:0;
        font:bold 12px "Lucida Grande", Arial, sans-serif;
    }
    body {
        padding: 10px;
    }
    h1{
        font-size:14px;
    }
    #status{
        width:50%;
        padding:10px;
        height:42px;
        outline:none;
    }
    .focusField{
        border:solid 2px #73A6FF;
        background:#EFF5FF;
        color:#000;
    }
    .idleField{
        background:#EEE;
        color: #6F6F6F;
        border: solid 2px #DFDFDF;
    }
</style>
</head>

来源：https://www.cnblogs.com/dachie/archive/2010/08/13/1799143.html

标签

高亮