我正在使用聯系表 7 進行問卷調查，其中一個問題要求填寫出生日期。我嘗試使用日期選擇器和文本輸入欄位來自動設定日期格式，但它不會按照我想要的方式作業。日期選擇器不會將年份限制為 4 位，并且文本輸入不會正確格式化為 MM / DD / YYYY 所以我所做的是創建了 3 個單獨的輸入：
[text* dob-month minlength:2 maxlength:2 class:inputs placeholder "MM"]
[text* dob-day minlength:2 maxlength:2 class:inputs placeholder "DD"]
[text* dob-year minlength:4 maxlength:4 class:inputs placeholder "YYYY"]
現在，當用戶在框中輸入資訊時，我只是嘗試自動切換到下一個欄位。因此，當他們輸入 2 位數字表示月份時，游標會跳轉到日期輸入欄位，他們輸入 2 位數字表示日期并自動跳轉到年份。我試過這個沒有運氣：
<script>
$(".dob-month").on("keyup", function () {
$(this).next('.dob-day').focus(); });
$(".dob-day").on("keyup", function () {
$(this).next('.dob-year').focus(); });
</script>
我試過這個沒有運氣：
${".inputs").keyup(function(){
$(this).next(".inputs").focus(); });
我試過這個沒有運氣：
$(".inputs").keyup(function (field, autoMove) {
if (field.value.length >= field,maxLength){
document.getElementByClass(autoMove).focus();
} });
我只是想讓它自動跳轉到下一個欄位，但我找不到解決方案。任何幫助將不勝感激，也許我只是語法錯誤，但無論哪種方式，我都無法使任何這些作業。
這是該部分列的 HTML：
<div class="grve-container">
<div class="grve-row grve-bookmark grve-columns-gap-30">
<div class="grve-column wpb_column grve-column-1-2">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
<label>Date of Birth</label>
<div class="grve-row grve-bookmark grve-columns-gap-0">
<div class="grve-column-1-3">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
[text* dob-month minlength:2 maxlength:2 class:inputs placeholder "MM"]
</div>
</div>
</div>
<div class="grve-column-1-3">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
[text* dob-day minlength:2 maxlength:2 class:inputs placeholder "DD"]
</div>
</div>
</div>
<div class="grve-column-1-3">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
[text* dob-year minlength:4 maxlength:4 class:inputs placeholder "YYYY"]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
更新：所以我一直在玩代碼，這幾乎可以正常作業。當我在一個欄位中輸入文本時，它會在控制臺記錄“你好”，所以這段代碼的最后一行有問題：
jQuery('.inputs').keyup(function () {
if (this.value.length >= this.maxLength){
console.log("hello");
jQuery(this).next('.inputs').focus();
} });
此外，我已經意識到 CF7 無法識別 $，出于某種原因，您必須實際放置 jQuery 才能識別輸入，但是當我將文本輸入到這 3 個欄位時，此函式會記錄“hello”
uj5u.com熱心網友回復：
首先，在您的主題或子主題的functions.php 中，您必須將jQuery UI 加入佇列。
如果您愿意，您甚至可以將其限制為表單所在的頁面。
如果你真的想花哨，你可以將文本欄位設定為只讀，強制人們使用 datepicker-ui。但是，這需要額外的編碼。
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
// Check if is page where contact form is, or leave out to enqueue everywhere
//if (is_page(123)) {
// Wordpress already has this...
wp_enqueue_script( 'jquery-ui-datepicker' );
// Serve locally if you want by downloading.
wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
// You can pick whatever theme you want here
wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/theme.min.css' );
//}
}
然后在您的聯系表格中執行以下操作：
[text* your-field class:use-datepicker]
[submit]
<script>
jQuery(function($){
$(".use-datepicker").datepicker({
dateFormat: "yy-mm-dd"
// Set Whatever Options you want here
// See https://api.jqueryui.com/datepicker/
});
});
</script>
uj5u.com熱心網友回復：
好的，所以當達到輸入的最大長度時，我得到了一行用于聯系表單 7 的作業代碼，以跳轉到下一個欄位。我將 ID 添加到 3 個欄位，然后創建了一個有效的函式。這是最終有效的代碼：
jQuery('#inputs1').keyup(function () {
if(this.value.length >= this.maxLength){
jQuery('#inputs2').focus();
} });
jQuery('#inputs2').keyup(function () {
if(this.value.length >= this.maxLength){
jQuery('#inputs3').focus();
} });
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338763.html
標籤：javascript 查询 WordPress的 联系表格 7