清除聯繫表格7中的字段（WordPress的）

我在我的Wordpress網站上使用聯繫表格7。不幸的是，該插件沒有內置的「點擊清除字段」，作爲默認的可用性很糟糕。清除聯繫表格7中的字段（WordPress的）

我已經創建了一個主題函數來獲得這個工作，並且幾乎在那裏，但需要有更好的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這是很好的，但我只想要清除剛領域的用戶點擊在目前，它會清除所有內容（姓名，電子郵件。，公司等），因爲所有領域都有類應用。

其次，對於我的當前設置，即使表單在點擊提交按鈕後發送，郵件也沒有到達，所以我的代碼出現了問題。

任何人都可以幫忙嗎？

來源

2012-09-20 photoman355

這裏是一個工作示例：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-20 21:00:53

非常感謝瑪麗安 – photoman355

，您可以清除焦點默認值和模糊取回該值。

例子是在這裏：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-20 21:06:02 uhura

聯繫表7確實有一個明確的價值...只需使用：水印

[text* txtName watermark "Name: "]

來源

2012-09-20 21:59:41 Locke

他們應該重新命名它 - 非常混亂。非常感謝洛克。 – photoman355

你是對的。如果我的解決方案對你有幫助，請給點意見; P – Locke

這是一個完美的答案關於如何在點擊contactform7時清除文本框值。看一看 http://www.bloggerseed.com/2011/07/clear-text-box-click-contactform-7/

來源

2012-09-21 08:18:31 user1688201

對WordPress的最新版本CF7，你可以通過添加該代碼添加，在復位/清除場按鈕：

<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-20 12:44:33

我面臨同樣同樣的問題，所以我只是解決了這個由創建hidden輸入復位按鈕，使用jQuery觸發

的Html

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

的Jquery

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

來源

2017-04-06 09:25:49

清除聯繫表格7中的字段（WordPress的）

回答

相關問題