自定义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（）

回答

相关问题