Question

我正在创建一个表单，需要在输入字段中包含示例。因此，当您单击它们时，示例将切换掉，您可以插入自己的值。

这些例子也需要在不同的类别中。我认为加载示例的最佳方法是使用title标签。因为，当我提交表格时......我不想让这些例子算起来。

目前我正在使用这个jQuery插件：http://jquery.kuzemchak.net/toggleval.php 它基本上可以像它应该的那样工作，但问题在于提交。要清除提交时的输入字段，我制作了这个脚本：

$(".formtable_submit").hover(function () {
    $(this).parents("form").find("input").each(function () {
        $(".toggleval:not(.toggleval_foc)").val("");
    });
});

因此，如果将鼠标悬停在提交上，它将清除所有带有.toggleval类的输入字段，但不清除其中带有用户插入值的字段（.toggleval_foc类）。

我还可以添加到该脚本中，当您将鼠标悬停时，它会再次显示示例..但它不是最佳解决方案。最好的方法是从标题标签和提交中显示它们，值标签将按原样显示。

如果你能指出我的剧本或想法，那就太棒了。我找不到任何有效的脚本。

Answer 1

最初在字段中输入默认值，给他们一类擦除，然后尝试这样的事情......

$('.wipe').addClass('wipeDefault'); $('.wipe').focus(function() { 
if (this.value == this.defaultValue) { this.value = ''; 
$('.wipe').removeClass('wipeDefault');

$(this).removeClass('wipeDefault'); } }); 
$('.wipe').blur(function() { if (this.value == '') { 
this.value = this.defaultValue; 
$('.wipe').addClass('wipeDefault');

$(this).addClass('wipeDefault'); } });

Answer 2

为什么不绑定到表单的提交事件而不是悬停？如果您这样做：

$('selector-for-your-form').submit(function() {
    $(this).find('input:not(.toggleval_foc)').val('');
    return true;
});

然后，您将在提交表单之前清除默认示例值。当然，您必须提供一个真实的选择器来代替'selector-for-your-form'。

Answer 3

您所描述的是占位符功能，它不应该通过将任何值放入实际输入字段来实现作为polyfill，从而无需清除表单提交中的invalids。

我建议切换到已经找到这些东西的插件，例如Web Forms下的this page上的任何插件：输入占位符。现代浏览器允许您使用:: placeholder CSS伪元素为占位符设置样式，并且大多数这些polyfill为您提供了一个用于旧版浏览器样式的分类元素。

从标题标签输入字段示例，使用切换

3 个答案: