jquery plugin 在 input 內顯示輸入說明文字 範例

# jQuery Plugin Code

  $.fn.description_inside_input_field = function(){
        return this.each(function(){
            $(this).val($(this).prop('title'));
            $(this).focus(function(){
                if($(this).val()==$(this).prop('title')){
                    $(this).val('');
                }
            }).focusout(function(){
                if($(this).val()==''){
                    $(this).val($(this).prop('title'));
                }
            });
        });
    }

# Document Ready

$("tr.add_row input[type='text']").description_inside_input_field();

# Html Code

<table id="table_add_data">
<tbody>
<tr class="add_row">
<td><input class="year" title="年度" type="text" value="" /></td>
<td><input class="electric" title="電力" type="text" value="" /></td>
<td><input class="derv" title="柴油" type="text" value="" /></td>
<td><input class="natural_gas" title="天然氣" type="text" value="" /></td>
<td><input class="gas" title="汽油" type="text" value="" /></td>
<td><input class="lpg" title="液化石油氣" type="text" value="" /></td>
<td><input class="tap_water" title="自來水" type="text" value="" /></td>
<td><input class="add_button" type="button" value="新增" /><input class="cancel_button" type="button" value="取消 " /><input class="submit" type="button" value="送出" /></td>
</tr>
</tbody>
</table>

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s