2

我在我的 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 类的字段，这很好，但我只想清除用户单击的字段。目前它会清除所有内容（姓名、电子邮件、公司等），因为所有字段都应用了该类.

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

任何人都可以帮忙吗？

4

7 回答 7

5

联系表格 7 确实具有明确的价值……只需使用：水印

[text* txtName watermark   "Name: "]
于 2012-09-20T21:59:41.060 回答
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/

于 2015-08-20T12:44:33.550 回答
2

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

html

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

jQuery

$("#reset").trigger('click');
于 2017-04-06T09:25:49.327 回答
0

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

于 2012-09-21T08:18:31.490 回答
0

这是一个工作示例：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);
于 2012-09-20T21:00:53.537 回答
0

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

示例在这里：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); 
                }
            })            
         }); 
         };
于 2012-09-20T21:06:02.903 回答
0

只需在联系表 7 中添加即可

<input type="reset" id="form-Cancel" class="wpcf7-form-control wpcf7-submit button"/>
于 2020-04-08T12:32:59.700 回答