jQuery简洁美观的星级评论表单代码

jQuery简洁美观的星级评论表单代码，简单美化单选框，textarea文本框的评论表单特效，还带有输入字数统计效果。

分类：其它特效 > jQuery插件难易：初级

查看演示下载资源下载积分： 20 积分

js代码

<script type="text/javascript">
    $(function () {

        $('.text-area-input').click(function () {
            if ($(this).val() == '请输入评论内容......') {
                $(this).css({
                    color: '#000000'
                }).val('')
            }
        });

        //离开的时候
        $('.text-area-input').blur(function () {
            var iNum = $(this).val().length;
            var fixedLength = 20;//固定长度
            if (iNum < fixedLength) {
                $('.text-area-input-length span').html(fixedLength - iNum);
            } else {
                $(this).val($(this).val().substr(0, fixedLength - 1));//截取长度
                $('.text-area-input-length span').html(iNum - fixedLength);
            }
        });

        //按下的时候
        $('.text-area-input').keydown(function () {
            var iNum = $(this).val().length;
            var fixedLength = 20;//固定长度
            if (iNum < fixedLength) {
                $('.text-area-input-length span').html(fixedLength - iNum);
            } else {
                $(this).val($(this).val().substr(0, fixedLength - 1));//截取长度
                $('.text-area-input-length span').html(iNum - fixedLength);
            }
        });


        $('.text-area-bottom a').click(function () {
            var star = $('input[name=star]:checked').val();
            var content = $('textarea[name=content]').val();
            alert(content);
        });

        $('.text-area-star label').click(function () {
            var labelLength = $('.text-area-star label').length;
            for (var i = 0; i < labelLength; i++) {
                if (this == $('.text-area-star label').get(i)) {
                    $('.text-area-star label').eq(i).addClass('red');
                } else {
                    $('.text-area-star label').eq(i).removeClass('red');
                }
            }
        });


    });
</script>