1

背景

我有几个 jQuery 函数，它们将搜索字段设置为包含“搜索”一词，并在单击该字段时将其清除/重置....

// Search Box Placeholder
jQuery('#q').focus(function() {
            if(jQuery(this).val() == 'Search') {
                jQuery(this).val('');       
            }
            else if(jQuery(this).val() == '') {
                jQuery(this).val('Search');
            }
        });
jQuery('#q').blur(function() {
            if(jQuery(this).val() == '') {
                jQuery(this).val('Search');             
            }
        });
jQuery('#q').val('Search');

问题 ？

唯一的问题是，如果在没有设置替代搜索词的情况下提交了搜索表单，我不确定如何清除“搜索”一词。如果内容等于“搜索”，有没有办法在表单提交之前检查和清除内容？

4

3 回答 3

2

如果值等于“搜索”，您可以阻止提交表单。

$('form').on('submit', function(){
   return $('#q').val() !== 'Search';
});

如果要支持不支持占位符属性的旧浏览器，也可以使用插件。

https://github.com/parndt/jquery-html5-placeholder-shim

于 2013-03-12T22:21:16.920 回答
1

找到这类事情的答案的关键往往更多的是了解术语而不是其他任何事情。

在这种情况下，如果您搜索单词“polyfill”而不是“mimic”，您就会找到解决方案。“Polyfill”是 Web 开发人员为浏览器脚本代言，该脚本实现了较新浏览器的功能，以便在较旧的浏览器中工作。

占位符功能是这方面的经典功能，因为它非常有用且易于完成。

Modernizr 是一个 Javascript 库，旨在简化使用 polyfill 的过程。它检测是否支持某个功能，以便您知道是否为该功能加载 polyfill。

这是一个有用的工具，但我提到 Modernizr 的主要原因是因为他们还维护了大量的 polyfill 脚本。

单击该链接并搜索“占位符”...您会发现有一整套脚本可以为您完成。只需选择最适合您的一种，或者从他们使用的技术中选择一种。

希望有帮助。

于 2013-03-12T22:34:11.237 回答
0

您可能要考虑的替代方法是不添加占位符文本作为控件的值。相反，使用另一个元素，可能是输入标签或跨度，绝对定位在文本输入之上，并在相应的输入具有控制权时隐藏它。此外，当用户单击此标签时，您应该将其隐藏并将焦点设置到控件。这也可以让您更改占位符颜色。

于 2013-03-12T22:23:53.277 回答