placeholder测试

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://static.mtimg.net/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){


/*
    $lineSearchbg.each(function(){

        //搜索框 请输入目的地、主题或关键词
        $(this).find('.placeholder').focus(function(){
            var arrive = $(this).val();
            if(arrive == '请输入目的地、主题或关键词'){
            $(this).val('').css('color','#000');
            }
        });

        $(this).find('#arriveSearchText').blur(function(){
            var arrive = $(this).val();
            if(arrive == ''){
                $(this).val('请输入目的地、主题或关键词').css('color','#b5b5b5');
            }
        });

    });
*/


        //搜索框 请输入目的地、主题或关键词
        $('.placeholder').focus(function(){
            if( $(this).val() == $(this).attr("placeholder") ){
                $(this).val('').css('color','#000');
            }
        });

        $('.placeholder').blur(function(){
            if( $(this).val() == ''){
                $(this).val( $(this).attr("placeholder") ).css('color','#b5b5b5');
            }
        });


});
</script>
<style type="text/css">
input{width:400px;margin:10px;}

</style>

</head>
<body>


<input type="text" class="" placeholder="啊啊啊啊啊啊啊啊">有placeholder,没有class<br>
<input type="text" class="placeholder">没有placeholder,有class<br>
<input type="text" class="placeholder" placeholder="啊啊啊啊啊啊啊">有placeholder,有class<br>
<input type="text" default="有default"><br>










</body>
</html>
原文地址:https://www.cnblogs.com/qq21270/p/3535873.html