";Mimic";jQuery中的占位符属性

"Mimic" placeholder attribute in jQuery?

本文关键字：quot 占位符 属性 jQuery Mimic      更新时间：2023-09-26

背景

我有几个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');

问题

唯一的问题是，如果提交搜索表单时没有设置替代搜索词，我不确定如何清除"搜索"一词。如果内容等于"搜索"，是否有方法在提交表单前检查并清除内容？

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

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

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

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

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

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

占位符功能是一个经典的功能，因为它非常有用，而且很容易完成。

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

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

单击该链接并搜索"占位符"。。。你会发现有一大堆的脚本可以为你做这件事。只需从他们使用的技术中选择最适合你的，或者婴儿床。

希望能有所帮助。

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

相关文章：