Question

背景

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

// 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');

问题？

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

Answer 1

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

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

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

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

Answer 2

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

在这种情况下，如果您搜索“polyfill”而不是“模仿”这个词，那么您已经找到了解决方案。 “Polyfill”是网站开发人员代表的浏览器脚本，它实现了新浏览器的功能，因此它可以在旧浏览器中使用。

占位符功能是一个经典之作，因为它非常有用且易于完成。

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

这是一个有用的工具，但我提到Modernizr的主要原因是因为它们也保持big list of polyfill scripts。

点击该链接并搜索“占位符”...您会发现有一大堆脚本可以为您完成。只需挑选一款最适合您的产品，或者使用他们使用的技术。

希望有所帮助。

Answer 3

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

jQuery中的“Mimic”占位符属性？

背景

问题？

3 个答案: