给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>