jquery模擬input的placeholder屬性效果

時間 2019-11-18

標籤 jquery 模擬 input placeholder 屬性效果欄目 JQuery 简体版

原文原文鏈接

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery模擬input的placeholder屬性效果</title>
    <script src="script/jquery-1.10.2.js"></script>
    <script>
        $(function(){
            if (! ("placeholder" in document.createElement("input"))) {
                $("input[placeholder]").each(function(){
                    var self = $(this);
                    var color = self.css("color");
                    var place = self.attr("placeholder");
                    self.val(place);
                    self.css("color", "#bbb");

                    self.on({
                        focus: function(){
                            if(self.val() == place){
                                self.val("");
                            }
                            self.css("color", color);
                        },
                        blur: function(){
                            if(self.val() == ""){
                                self.val(place);
                                self.css("color", "#bbb");
                            }
                        }
                    });
                });
            }
        });
    </script>
</head>
<body>

<p><input type="text" name="" placeholder="請輸入搜索內容"/></p>
<p><input type="text" name="" placeholder="哈哈。。"/></p>



</body>
</html>

因爲比較經常使用，封裝成了插件，按須要調用便可：css

若是是密碼框的話，就有點問題了，最好的辦法是用label標籤模擬，判斷輸入框，若是輸入了文字，把lable隱藏就能夠了。。。懶得寫了。。html

能夠參考：https://github.com/mathiasbynens/jquery-placeholder DEMO：http://mathiasbynens.be/demo/placeholderjquery

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input {height:20px;line-height:20px;color:#333;border:1px solid #999;}
    </style>
</head>
<body>

<input type="text" name="" id="search" placeholder="請輸入內容。。。">
<input type="text" name="" id="user" placeholder="dfdsfd">
<br/>
<textarea name="" id="" cols="30" rows="10" placeholder="請輸入留言內容。。。"></textarea>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
;(function($){
    $.fn.extend({
        placeholder: function() {
            if ("placeholder" in document.createElement("input")) return;
            $(this).each(function() {
                var self = $(this);
                var place = self.attr("placeholder");
                var color = self.css("color");
                self.val(place).css("color", "#aaa");
                self.on({
                    focus: function() {
                        if (self.val() == place) {
                            self.val("");
                        }
                        self.css("color", color);
                    },
                    blur: function() {
                        if (self.val() == "") {
                            self.val(place).css("color", "#aaa");
                        }
                    }
                });
            });
        }
    });
})(jQuery);

$(function() {
    //$("#search").placeholder();
    $("input, textarea").placeholder();
})
</script>

</body>
</html>

相關標籤/搜索

每日一句

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