Question

I am programming a panel using jquery, you can see it here: http://www.taoktalk.com/socialapps/baidu/taozhe/ My logics are:

When i click each of the buttonset, the defaut value of the input element changed;
Each time when focus in the input element, the value was cleared;
If blur out without type anything, the default value was reset back, but if typed some words, the words is the value.

Method inputWithDefValue implements the logic 2 and 3. But logic 1, when i click the button set, the evnet focus and blur was bind incrementally, so the defVal variable was not correct. How to fix this, thanks.

对于调试，我使用alert（defVal）；聚焦evnet。

Javascrip代码：

$(function() {
    $( "#tabs" ).tabs();

    var selectedTab =   
    $( "#tabs" ).bind( "tabsselect", function(event, ui) {
        //selectedTab = ui.panel.id;
    });
    $( "#goods" ).buttonset();
    $( "#shop" ).buttonset();

    var defaultInputVal =   ;
    $( input[type=radio] ).bind( click , function(){
            switch (this.id){
                case  goods-url :
                    defaultInputVal =  输入宝贝网址 ;
                    break;
                case  goods-name :
                    defaultInputVal =  输入宝贝名称 ;
                    break;
                case  goods-id :
                    defaultInputVal =  输入宝贝编号 ;
                    break;
                case  shop-url :
                    defaultInputVal =  输入店铺网址 ;
                    break;
                case  shop-nick :
                    defaultInputVal =  输入店铺名称 ;
                    break;
            }
            $( input.input-search ).val(defaultInputVal);  //set default value of input.input-search element
            $( input.input-search ).inputWithDefValue(defaultInputVal);  //excute inputWithDefValue method every time after click
        });


    //excute inputWithDefValue method without click buttonset
    $( input#input-goods ).inputWithDefValue( 输入宝贝网址 );
    $( input#input-shop ).inputWithDefValue( 输入店铺网址 );
});

$.fn.extend({
    inputWithDefValue: function(defVal){
        this.bind( focus , function(){
            alert(defVal);   //for debug purpose 
            if ($(this).val() == defVal) {
                $(this).val(  ).css({
                     color :  black 
                });
            }
        });

        this.bind( blur , function(){
            if ($(this).val() ==   ) {
                $(this).val(defVal).css({
                     color :  #969696 
                });
            }
        });

    }
});

Answer 1

恐怕您的代码需要进行大量的重构。在您当前的实现中，在每次单击单选按钮时，您都会将更新的函数绑定到模糊和聚焦事件，这只是您的问题之一（尽管是最严重的问题）。

当您很好地将需求放入有序列表中时，很明显，您需要绑定到三个事件：单击按钮、聚焦和模糊输入字段。这很好地表明您必须实现以下功能（无需使用$.fn.extend）：

$( input[type=radio] ).on( click , function() { ... });
$( input.input-search ).on( focus , function() { ... });
$( input.input-search ).on( blur , function() { ... });

因此，正确的方法是一次性将defaultInputVal声明为对象，而不是单个字符串，如下所示：

var defaultInputVal = {
  goods-url  :  输入宝贝网址 ,
  goods-name :  输入宝贝名称 ,
  ...
};

Based on the id of any input field, you can easily get the default value for the given field. The above mentioned three function should run along the lines:

$( input[type=radio] ).on( click , function() { 
  $( input.input-search ).val(defaultInputVal[$(this).attr( id )]);
});

$( input.input-search ).on( focus , function() {
  var selected_radio_id = $( input[type=radio]:checked ).attr( id );
  if ($(this).val() == defaultInputVal[selected_radio_id]) {
    $(this).val(  ).css({
       color :  black 
    });
  }
}).on( blur , function() {
  var selected_radio_id = $( input[type=radio]:checked ).attr( id );
  if ($(this).val() ==   ) {
    $(this).val(defaultInputVal[selected_radio_id]).css({
       color :  #969696 
    });
  }
});

代码未经测试，但应该为您指明正确的方向。仍然有很大的改进空间，比如不要在全局命名空间中乱丢变量，但这可能是您需要采取的第一步。

Answer 2

将您的扩展方法更改为此方法

$.fn.extend({
    setAsDefault: function(defValue, undefined) {
        this.each(function() {
            var valueToUse = (defValue === undefined) ? this.value : defValue;
            this.defaultValue = valueToUse;
            this.value = valueToUse;
        });
    },
    revertToDefault: function(optionalValue) {
        return this.bind( focus , function() {
            if (this.value == this.defaultValue) {
                $(this).val(  ).css({
                     color :  black 
                });
            }
        }).bind( blur , function() {
            if (this.value ==   ) {
                $(this).val(this.defaultValue).css({
                     color :  #969696 
                });
            }
        }).setAsDefault(optionalValue);
    }
});

它创建了两种方法，一种是扩展对象以对模糊和聚焦事件作出反应，另一种是允许您设置默认值。

用于初始化

$( input.input-search ).revertToDefault( 输入宝贝网址 );

对于您的单选按钮，请使用

$( input.input-search ).setAsDefault(defaultInputVal);

http://jsfiddle.net/gaby/FETcS/

友情链接