爲MM-YYYY文本框自動插入「 - 」或「/」字符？

目前我正在使用CC驗證模板，但不幸的是，使用標準的下拉/單獨文本框來選擇月份/年份到期字段並不適用於此特定項目。爲MM-YYYY文本框自動插入「 - 」或「/」字符？

取而代之，我正在尋找一個文本框（格式爲MM-YYYY）來捕獲到期日期 - 但是，我正在寫這個，以便客戶不需要輸入「 - 」或月/年條目之間的「/」。

取而代之的是，在客戶輸入「02」之後，連字符或斜槓應該在其後自動出現。如果客戶在一年後退出，連字符/斜槓也應該被刪除，從而允許他們輕鬆編輯他們的月份數據。

是否有任何體面的解決方案可以完成這項工作？或者它是你自己的一個案例？

2017-01-25 Eoghan

https://github.com/RobinHerbots/Inputmask – hackerrdave

你爲什麼不有兩個文本框，並將其合併與CSS？ – 31piy

我建議你自己動手。我過去做過類似的事情，並沒有那麼艱難。這對於這種事情實際上是一個很好的練習。這是一個讓你開始的頁面https://learn.jquery.com/plugins/basic-plugin-creation/ – nurdyguy

請試試這個，我的日期 https://jsfiddle.net/dhruv1992/6fk8fb1v/

<input type="text" id="dateofbirth">

jQuery的

$("#dateofbirth").on('keyup',function(event){ 
    var key = event.keyCode || event.charCode; 
    if (key == 8 || key == 46) return false; 
    var strokes = $(this).val().length; 
    if(strokes === 2 || strokes === 5){ 
     var thisVal = $(this).val(); 
     thisVal += '/'; 
     $(this).val(thisVal); 
    } 
});

來源

2017-01-25 17:52:22

'8'和'46'代表什麼？我知道，但下一位程序員會知道嗎？爲什麼當'this.value.length'快幾百倍時使用'$（this）.val（）.length'？實際上，當你只需要執行'this.value + =「/」;「時，你會創建'$（this）'三次''但除此之外，如果我想退格呢？我不能因爲你阻止了keyCode 8。基本上我說的是，這對程序員和用戶來說都是非常不友好的，這真的是一個成就...... –

我只是爲了讓我的代碼更清晰。對不起，但我不喜歡捷徑。 –

您的代碼不清楚。完全一樣。不是程序員，也不是瀏覽器，因爲它不需要任何理由進行不必要的計算...... –

這是相當粗糙創建（但至少實現您的要求）。

https://jsfiddle.net/justinwyllie/ntdwc1qt/

$('#cc').on('input', function() { 
    var v = $(this).val(); 
    if (v.length == 2) { 
     $(this).val(v + '-'); 
    } 

    if (v.length == 3) { 
     $(this).val(v.substring(0,2)); 
    } 


})

也許這和Dhruv直升機Gupta的回答的組合，其至少嘗試檢測擊鍵？

來源

2017-01-25 17:54:38

btw輸入可能不是理想的，因爲它不會在退格上觸發 - 根據MDN https：// developer。 Mozilla瀏覽器。org/en-US/docs/Web/Events/input –

重新發表您的評論：根據您提供的鏈接，這僅適用於IE9。對我來說似乎很好。 –

<input type="month" />

完成任務。

來源

2017-01-25 17:55:44

這是在@Niet工作的瀏覽器？我無法得到這個在火狐51工作。 – Rounin

@Rounin [基本上除了Firefox的一切]（http://caniuse.com/#feat=input-datetime），因爲Firefox是新的IE瀏覽器。 –

哈哈。哎喲。我喜歡FF，因爲我喜歡Chromium ;-)我從caniuse看到FF54會/會支持。感謝您的正確caniuse頁面（我搜索，但不是_datetime_）。 – Rounin

我喜歡@ 31piy有兩個文本框的想法。

這裏使用兩個文本輸入框一種方法：

var inputMonth = document.querySelector('input[placeholder="mm"]'); 
 
var inputYear = document.querySelector('input[placeholder="yyyy"]'); 
 
var enteredDate = document.getElementsByTagName('p')[0]; 
 

 
function updateEnteredDate() { 
 

 
    enteredDate.textContent = ''; 
 

 
    if (inputMonth.value.length > 0) { 
 
    \t enteredDate.textContent += inputMonth.value; 
 
    } 
 

 

 
    if ((inputMonth.value.length > 1) && (inputYear.value.length < 1)) { 
 

 
    \t if (document.activeElement === inputMonth) { 
 
    \t  enteredDate.textContent += '-'; 
 
    \t  inputYear.focus(); 
 
    \t } 
 

 
    \t else if (document.activeElement === inputYear) { 
 
    \t  inputMonth.focus(); 
 
    \t } 
 
    } 
 

 
    if (inputYear.value.length > 0) { 
 
    \t enteredDate.textContent += '-'; 
 
    \t enteredDate.textContent += inputYear.value; 
 
    } 
 

 
} 
 

 
inputMonth.addEventListener('keyup', updateEnteredDate, false); 
 
inputYear.addEventListener('keyup', updateEnteredDate, false); 
 
window.addEventListener('load', function(){inputMonth.focus();}, false)

p { 
 
height: 72px; 
 
margin: 0; 
 
padding: 0; 
 
line-height: 72px; 
 
font-size: 72px; 
 
font-weight: bold; 
 
}

<p></p> 
 

 
<form> 
 
<input type="text" size="2" maxlength="2" placeholder="mm" /> 
 
<input type="text" size="4" maxlength="4" placeholder="yyyy" /> 
 
</form>

來源

2017-01-25 21:22:20 Rounin

爲MM-YYYY文本框自動插入「 - 」或「/」字符？

回答

相關問題