[JavaScript]利用JQuery實做Input Text Box Hints－歡笑的背後是看不見的悲傷

在某些特定的網頁表單
使用者常常不太清楚要輸入什麼樣的資料（即使前面有敘述亦然XD）
此時可利用JavaScript
在TextBox內部加上簡單的Hint

廢話不多說直接看程式碼囉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Input Hints</title>
    <style type="text/css">
        input.blur {
            color:#808080;  /* GRAY */
        }
    </style>
</head>
<body>
    <div id='inputDiv'>
        <input type='text' title='請輸入姓名' />
        <br /><br />
        <input type='text' title='請輸入E-Mail' />
        <br /><br />
        <input type='text' title='請輸入電話' />
    </div>
    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    textBoxHint("inputDiv");
    
    function textBoxHint(id, options) {
        var defaults = {
                            selector: 'input:text[title]',
                            blurClass:'blur'
                       };
        $element = $('#'+id);
        $.extend(true, defaults, options);
    
        if ($element.is(':text')) {
            if (!$element.attr('title'))
                $e = null;
        } else {
            $element = $element.find(defaults.selector);
        }
        
        if ($element) {
            $element.each(function() {
                var $target = $(this);
                if ($.trim($target.val()).length == 0) {
                    $target.val($target.attr('title'));
                }
                if ($target.val() == $target.attr('title')) {
                    $target.addClass(defaults.blurClass);
                } else {
                    $target.removeClass(defaults.blurClass);
                }
    
                $target
                .focus(function() {
                    if ($.trim($target.val()) == $target.attr('title')) {
                        $target.val('');
                        $target.removeClass(defaults.blurClass);
                    }
                })
                .blur(function() {
                    var val = $.trim($target.val());
                    if (val.length == 0 || val == $target.attr('title')) {
                        $target.val($target.attr('title'));
                        $target.addClass(defaults.blurClass);
                    }
                });
                
                // empty the text box on form submit                
                $(this.form).submit(function(){
                    if ($.trim($target.val()) == $target.attr('title'))
                        $target.val('');
                });
            });
        }
    }
</script>
</body>
</html>

執行結果如下圖

不過HTML5給input這個標籤新增了一個屬性：placeholder

<input type='text' placeholder='請輸入姓名' />
<br /><br />
<input type='text' placeholder='請輸入E-Mail' />
<br /><br />
<input type='text' placeholder='請輸入電話' />

只要這樣就可以達到上面那大段程式碼的效果了XD
HTML5果然很強大！

資料來源