自定義jQuery插件返回val（）

我創建了一個簡單的jQuery插件，如果該字段爲空（文本框的水印），則將「灰顯」文本放入文本框中。問題是，當我提交表單，並試圖獲取文本框的值時，它將返回水印文本而不是空字段。自定義jQuery插件返回val（）

水印文字等於「title」屬性，所以我可以做這樣的事情，但我討厭在我的表單中的每個文本做到這一點：

if ($("#textboxid").val() == $("#textboxid").attr("title")) { 
    //default, return empty string 
} else { 
    //user entered this 
}

理想的情況下，這將成爲我的插件的一部分，它會返回一個空字符串，當我打電話.val（）任何建議如何做到這一點？

來源

2012-08-09 Losbear

我對我的定製水印/佔位符插件有類似的想法。我只需處理它onclick（表單提交按鈕），然後遍歷所有內容。

Updated jsFiddle DEMO

(function ($, window, document, undefined) { 

    $.fn.myCustomVal = function() { 
     return $(this).each(function() { 
      var _self  = $(this), 
       _watermark = _self.attr('title'); 

      _self.attr('data-watermark', 'on'); 
      _self.val(_self.attr('title')); 

      _self.on('focus', function() { 
       $(this).val(''); 
      }); 
      _self.on('blur', function() { 
       $(this).val(_watermark); 
      }); 
     });    
    }; 

    $(function() { 
     // change this class here to whatever you want 
     $('.btnSubmit').on('click', function() { 
      $('input:text[data-watermark]').each(function() { 
       if ($(this).val() == $(this).attr("title")) { 
        $(this).val(''); 
       } 
      }); 

      // now validate/submit/whatnot 
      alert('submitted!'); 
     }); 
    }); 

}(jQuery, window, document)); 

// ************************ 
// Initiate plugin 
$('input:text').myCustomVal();

來源

2012-08-09 20:43:20

我實際上希望添加一個新的方法到我的插件，而不是.val（）我可以做.mycustomval（），它會在返回值之前進行上述比較。那可能嗎？我可以做一些像$（「＃adsf」）。mycustomval（）或$（「＃adsf」）。val（）。mycustomval（）sorta thing？ – Losbear 2012-08-09 20:55:44

只需將其更新爲一個現在可以自行處理它的插件。 – 2012-08-09 21:09:16

嘗試這樣的做法：http://jsfiddle.net/aVhMh/3/

的邏輯也並不十分普遍：你的插件是，如果用戶想要輸入的準確沒有用水印值。我知道這是一個不太可能發生的情況，但這樣做會更加優雅。

$("input[type=text]").addClass("watermark"); 
$("input[type=text]").each(function() { 
    $(this).val($(this).attr("title")); 
}); 

$("input[type=text]").on("focus", function() { 
    if ($(this).hasClass("watermark")) { 
     $(this).removeClass("watermark").val(""); 
    } 
}); 
$("input[type=text]").on("blur", function() { 
    if ($(this).val() == "") { 
     $(this).val($(this).attr("title")).addClass("watermark"); 
    } 
}); 
$("form").on("submit", function() { 
    $("input[type=text].watermark").val(""); 
    $(this).submit(); 
});

來源

2012-08-09 21:05:28 Cranio

我接受mcpDesigns的答案，因爲它讓我在正確的道路上，但不是我正在尋找的東西。我最終加入以下的插件來創建一個調用的函數「ActualVal（）」返回的正確值：

 $.fn.ActualVal = function() { 
      if (this.val() == this.attr(opts.attrName)) { 
       return ""; 
      } else { 
       return this.val(); 
      } 
     }

所以當而不是讓使用VAL（）的值，我通過使用獲得的價值.ActualVal（）。比編碼周圍的特定按鈕更清潔和動態=）

謝謝你們！

來源

2012-08-10 14:12:53 Losbear

自定義jQuery插件返回val（）

回答

相關問題