输入框获得焦点与失去焦点、阴影效果

1.jQuery表单Input文本框默认说明文字获得焦点后消失效果

第一种方法：

        <script>
            $(function(){
                $('#input').focus(function(){
                $(this).val("");
                });
                $('#input').blur(function(){
                $(this).val("请输入反馈意见");
                });
            })
        </script>

第二种方法：

(通用)

    $(function() {
        $('input:text').each(function() {
            var txt = $(this).val();
            $(this).focus(function() {
                if (txt === $(this).val()) {
                    $(this).val("");
                }
            });
            $(this).blur(function() {
                if ($(this).val() == "") {
                    $(this).val(txt);
                }
            });
        });
    })

 第三种方法：

效果：鼠标点击输入框时，提示性文字无。

<input type="text" value="请输入反馈意见" name="input" id="input" onfocus="if(value=='请输入反馈意见') {value=''}" onblur="if (value=='') {value='请输入反馈意见'}"/>

 

效果：鼠标点击输入框后，文字颜色变为黑色。

<script>
    $(function() {
        $('#input').focus(function() {
        document.getElementById("input").style.color="#000";
        });
    })
</script>

 

输入框box-shadow活的焦点时有阴影

<style>

    .test{
    display: block;
    width: 100%;
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
.test:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
</style>
<input type="text" value="请输入内容" class="test"/>