placeholder的模擬

時間 2019-11-17

標籤 placeholder 模擬简体版

原文原文鏈接

本身寫的一個placeholder的模擬javascript

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;border:0;outline: none;list-style:none;}
body{font-size: 12px;}
.inputtext_1{width:200px;height: 16px;line-height: 16px\9;padding: 8px 10px;border:1px solid #ccc;}
ul{margin: 100px;}
ul li{margin-top: 10px;}
</style>
</head>
<body>
    <ul>
        <li>
            <input type="text" placeholder="用戶名" class="inputtext_1" />
        </li>
        <li>
            <input type="password" placeholder="密碼" class="inputtext_1" />
        </li>
    </ul>
<script type="text/javascript">
if(typeof placeholder== "undefined" || !placeholder) var placeholder={};
(function(){
    placeholder={
        check:function(){
            return 'placeholder' in document.createElement('input');    
        },
        fix:function(h){
            if(!placeholder.check()){
                $('input[placeholder]').each(function (i,v){
                    var v = $(v),s = $('<span>'+v.attr('placeholder')+'</span>');
                    $(v).wrap('<div style="position:relative;"></div>');
                    s.css({
                        "position":"absolute",
                        //若是傳入參數 則以參數爲高度
                        "height":(h||v.outerHeight()),
                        "line-height":v.outerHeight()+"px",
                        "padding-left":parseInt(v.css("padding-left"))+1,
                        "left":0,
                        "top":0,
                        "color":"#a9a9a9"
                    }).insertAfter(v);

                    v.keyup(function(){
                        if(v.val()!=="") s.hide();
                            else s.show();
                    });

                    s.click(function(){
                         setTimeout(function(){v.focus();},0)    
                    });

                });
            }
        }
    }
    //若是傳入參數 則以參數爲高度
    placeholder.fix(42);
})()

</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。