给form输入框添加提示信息

受magento头部搜索栏的启发，稍微简化改写了一下js

代码如下

 

/**  简化 重命名后的js 源代码，参考Varien.searchForm  
* Form input help infomation client model 
*/ 
Varien.helpInfo = Class.create(); 
Varien.helpInfo.prototype = { 
    initialize : function(form, field, emptyText){ 
        this.form   = $(form); 
        this.field  = $(field); 
        this.emptyText = emptyText; 
 
        Event.observe(this.form,  'submit', this.submit.bind(this)); 
        Event.observe(this.field, 'focus', this.focus.bind(this)); 
        Event.observe(this.field, 'blur', this.blur.bind(this)); 
        this.blur(); 
    }, 
 
    submit : function(event){ 
        if (this.field.value == this.emptyText || this.field.value == ''){ 
            Event.stop(event); 
            return false; 
        } 
        return true; 
    }, 
 
    focus : function(event){ 
        if(this.field.value==this.emptyText){ 
            this.field.value=''; 
        } 
 
    }, 
 
    blur : function(event){ 
        if(this.field.value==''){ 
            this.field.value=this.emptyText; 
        } 
    } 
} 

使用范例

 

<form id="test_form" method="post"> 
        <label for="testinput"><?php echo $this->__('just a test:') ?></label> 
        <input id="testinput" type="text" class="input-text" /> 
        <button type="submit" class="button"><span><span><?php echo $this->__('Submit') ?></span></span></button> 
        <script type="text/javascript"> 
            var testForm = new Varien.helpInfo('test_form', 'testinput', 'Some help info...'); 
        </script> 
</form>