使用 jquery .load() 时检查空输入/文本区域答案

【问题标题】：Check for empty input/textarea when using jquery .load()使用 jquery .load() 时检查空输入/文本区域
【发布时间】：2012-10-19 16:22:06
【问题描述】：

当用户在输入/文本区域中输入文本时，我正在处理标签淡出问题。到目前为止它运行良好，但我想不出一个好方法来检查输入/文本区域在加载时是否具有现有值，因此我可以自动隐藏标签。

正在使用 .load() 加载输入/文本区域，这就是我使用 $(document) 而不是直接定义选择器的原因。

这是一个示例，显示了我试图克服的问题。任何帮助将不胜感激。此外，如果您有任何建议，我可以如何将此功能包装到一个插件/功能中，这将更加有用。谢谢！

http://jsfiddle.net/skyros/FTXc3/

如果你不想去 jsfiddle 和伪代码

//JQUERY
$(document).on('click', 'label', function() {
  $(this).next().focus();
});

$(document).on('focus', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('blur', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 1) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('keypress', 'input, textarea', function() {
  var label = $(this).prev('label').hide();
});

【问题讨论】：

标签： jquery input textarea label

【解决方案1】：

一种方法是使用过滤功能获取长度> 0的元素然后隐藏标签

$(function(){ // on dom ready
    $('label').filter(function(){
        // return labels that have siblings with input val > 0
        return $.trim($(this).siblings('input[type=text]').val()).length > 0;
    }).hide(); // hide those labels that are returned 
    // or do whatever you want to do with those labels here
});

http://jsfiddle.net/wirey00/XwGa6/

【讨论】：

这正是我想要的。我对其进行了修改以在 .load() 上触发一个函数。谢谢！

【解决方案2】：

我会改变：

$(document).on('focus', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) :     $(this).prev('label').fadeTo(100, 0).hide();
});

到

function input_textarea_focussed() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) :     $(this).prev('label').fadeTo(100, 0).hide();
};
$(document).on('focus', 'input,textarea', input_textarea_focussed());

然后添加

$(document).on('load', function() {
  $("input, textarea").each(input_textarea_focussed);
});

【讨论】：