如何重构这个代码块使其变得简单且动态？

发布于 2024-10-20 07:46:50 字数 545 浏览 7 评论 0原文

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = 'Type here';
        }
    });
});

我有这段代码，它工作完美，只是它不是动态的。我想知道是否有一种优雅的方法可以动态地将值重置为原始值。我在想，也许如果您在其 ID 或某种其他类型的属性中定义了原始文本，您可以通过这种方式重置它..或者您可以使用变量、数组或元组。 SO认为最好的方法是什么？

原文

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = 'Type here';
        }
    });
});

I have this block of code that works perfectly except that it is not dynamic. I was wondering if there was an elegant way to reset the value to the original dynamically. I was thinking that maybe if you defined the original text in its ID or some other sort of attribute you could reset it that way.. or maybe you could use variables or arrays or tuples. What does SO think is the best way of doing it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

慢慢从新开始 2024-10-27 07:46:50

将值存储到输入的其他属性中怎么样？

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.title = this.value;
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = this.title;
        }
    });
});

How about storing the value into some other attribute of the input?

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.title = this.value;
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = this.title;
        }
    });
});

回复收藏 0 原文

且行且努力 2024-10-27 07:46:50

在这种情况下，我更喜欢使用 html5(占位符属性 ) 与 javascript 回退。

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}
$(document).ready(function() {
  if (!supports_input_placeholder())
  {
    $('input').each(function(){
      $(this).val($(this).attr('placeholder'))
    });
    $('input').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('input').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = $(this).attr('placeholder');
        }
    });
  }

});

该脚本将检测本机占位符是否可用，如果不可用，它将从占位符属性中获取文本并对其进行模拟。

In this scenario i prefer to use html5(placeholder attrinute) with javascript fall back.

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}
$(document).ready(function() {
  if (!supports_input_placeholder())
  {
    $('input').each(function(){
      $(this).val($(this).attr('placeholder'))
    });
    $('input').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('input').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = $(this).attr('placeholder');
        }
    });
  }

});

This script will detect if native placeholder is available if not it will take text from placeholder attribute and simulate it.

回复收藏 0 原文

韶华倾负 2024-10-27 07:46:50

如果它的作用域为每个元素，您可以将其存储在变量中：

$(function() {
  $('.watermark').each(function() {
    var lead = $(this).val();
    $(this).focus(function() {
      if ($(this).val() == lead) $(this).val('');
    }).blur(function() {
      if ($(this).val() == '') $(this).val(lead);
    });
  });
});

You can just store it in a variable if it's scoped to each element:

$(function() {
  $('.watermark').each(function() {
    var lead = $(this).val();
    $(this).focus(function() {
      if ($(this).val() == lead) $(this).val('');
    }).blur(function() {
      if ($(this).val() == '') $(this).val(lead);
    });
  });
});

回复收藏 0 原文

~没有更多了~