清除联系表 7 (Wordpress) 中的字段答案

【问题标题】：Clear fields in Contact Form 7 (Wordpress)清除联系表 7 (Wordpress) 中的字段
【发布时间】：2012-09-13 06:55:20
【问题描述】：

我在我的 Wordpress 网站上使用联系表 7。不幸的是，该插件默认没有内置“点击时清除字段”，这很不利于可用性。

我已经创建了一个主题函数来让它工作，并且快到了，但需要一个具有更好 jQuery 技能的人来让一切按预期工作。这是我的代码：

// Clear Formfields
function clearfield() {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
         $(".clearfields").click(function () {
            var text = $(this).text();
                $(".clearfields").val("");
            });                             
    });
</script>
<?php
}
add_action( 'wp_footer', 'clearfield', 100 );

我无法在不修改插件的情况下操作输入字段，但我可以添加类。目前我有：

<input class="clearfields" type="text" value="enter name etc">

目前这将清除任何具有 .clearfields 类的字段，这很好，但我只想清除用户点击的字段。目前它会清除所有字段（姓名、电子邮件、公司等），因为所有字段都有申请的班级。

其次，使用我当前的设置，即使在单击提交按钮后表单似乎正在发送，但电子邮件没有到达，所以我的代码出现了问题。

谁能帮忙？

【问题讨论】：

标签： jquery wordpress forms field

【解决方案1】：

Contact Form 7 确实有明确的价值...只需使用：水印

[text* txtName watermark   "Name: "]

【讨论】：

他们应该重新命名它以清除 - 非常混乱。非常感谢洛克。

【解决方案2】：

在最新版本的 cf7 for wordpress 上，您可以通过添加以下代码来添加重置/清除字段按钮：

<input type="reset" class='btn btn-primary' />

默认情况下，重置按钮不会继承任何样式，所以它只会像普通的无样式按钮一样显示。您仍然可以应用任何 CSS 样式，如上所示。

这里是示例表单代码，以相同的样式显示“提交”按钮和“重置”按钮。

[submit class:btn class:btn-primary]<input type="reset" class='btn btn-primary' />

在此处实时预览：http://www.ewallzsolutions.com/free-quote/

【讨论】：

【解决方案3】：

我也面临同样的问题，所以我只是通过创建 hidden 输入重置按钮并使用 jquery 触发来解决这个问题

HTML

<input type="reset" id="reset" class="sr-only">

jQuery

$("#reset").trigger('click');

【讨论】：

【解决方案4】：

这是一个工作示例：http://jsfiddle.net/cyVyZ/

HTML 代码：

<input type="text" id="field1" class="clearfields" value="field 1" />
<input type="text" id="field2" class="clearfields" value="field 2" />
<input type="text" id="field3" class="clearfields" value="field 1" />

jQuery 代码：

(function($) {
  $('.clearfields').bind('focus', function() {
    $(this).val('');
  });
})(jQuery);

【讨论】：

【解决方案5】：

您可以清除焦点默认值并在模糊时取回该值。

示例在这里：jsfiddle

jQuery 代码：

$.fn.defaultValue = function(){              
         return this.each(function(){ 
            var default_value = $(this).val(); 
            var $this = $(this);        

            $this.focus( function() {    
                if ($this.val() == default_value) $(this).val("");
                });
            $this.blur( function() {
                if ($this.val().length == 0){
                    $this.val(default_value); 
                }
            })            
         }); 
         };

【讨论】：

【解决方案6】：

这是关于如何在contactform7中单击时清除文本框值的完美答案。看看 http://www.bloggerseed.com/2011/07/clear-text-box-click-contactform-7/

【讨论】：

【解决方案7】：

只需在联系表 7 中添加此内容

<input type="reset" id="form-Cancel" class="wpcf7-form-control wpcf7-submit button"/>

【讨论】：