對於MM / DD / YYYY文本，僅顯示用戶未輸入的文本

Question

我有一個如下圖的頁面

根據我的要求，只允許用戶使用頁面上提供的小鍵盤輸入數字。 因此，輸入字段為只讀。

現在我想得到的是，當用戶開始輸入月份時，其他文本應保留在文本字段中，直到用戶鍵入。 例如05 / DD / YYYY這樣。 因此，該文本將被隱藏。

如果我放置了占位符，那么當用戶開始輸入數字時，所有文本都消失了。 我不要 因此，我在單獨的span tag采用了“ MM / DD / YYYY”文本。

 var Memory = "0", // initialise memory variable Current = "", // and value of Display ("current" value) Operation = 0, // Records code for eg * / etc. MAXLENGTH = 8; // maximum number of digits before decimal! function format(input, format, sep) { var output = ""; var idx = 0; for (var i = 0; i < format.length && idx < input.length; i++) { output += input.substr(idx, format[i]); if (idx + format[i] < input.length) output += sep; idx += format[i]; } output += input.substr(idx); return output; } function AddDigit(dig) { //ADD A DIGIT TO DISPLAY (keep as 'Current') if (Current.indexOf("!") == -1) { //if not already an error if ((eval(Current) == undefined) && (Current.indexOf(".") == -1)) { Current = dig; document.calc.display.focus(); } else { Current = Current + dig; document.calc.display.focus(); } Current = Current.toLowerCase(); //FORCE LOWER CASE } else { Current = "Hint! Press 'Clear'"; //Help out, if error present. } if (Current.length > 0) { Current = Current.replace(/\\D/g, ""); Current = format(Current, [2, 2, 4], "/"); } document.calc.display.value = Current.substring(0, 10); document.getElementById("cursor").style.visibility = "hidden"; } function Clear() { //CLEAR ENTRY Current = ""; document.calc.display.value = Current; document.calc.display.focus(); document.getElementById("cursor").style.visibility = "visible"; //setInterval ("cursorAnimation()", 5000); } function backspace() { Current = document.calc.display.value; var num = Current; Current = num.slice(0,num.length - 1); document.calc.display.value = Current; document.calc.display.focus(); document.getElementById("cursor").style.visibility = "hidden"; } function cursorAnimation() { $("#cursor").animate({ opacity: 0 }, "fast", "swing").animate({ opacity: 1 }, "fast", "swing"); } //---------------------------------------------------------------> $(document).ready(function() { document.getElementById("cursor").style.visibility = "visible"; //setInterval ("cursorAnimation()", 1000); }); 

 .intxt1 { padding: 16px; border-radius: 3px; /* border: 0; */ width: 1017px; border: 1px solid #000; font-family: Droid Sans Mono; background: #fff; } .txtplaceholder { font-family: "Droid Sans Mono"; color: #D7D7D7; position: relative; float: left; left: 219px; top: 17px; z-index: 10 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; } #cursor { position: relative; z-index: 1; left: 32px; top: 2px; visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <form Name="calc" method="post"> <div style="position:relative"> <span id="cursor">_</span> <span class="txtplaceholder">MM/DD/YYYY</span> <span style="z-index:100"> <input class="intxt1" autocomplete="off" id="pt_dob" name="display" value="" type="text" readonly> </span> <button class="cancel-icon" type="reset" onClick="Clear()"></button> </div> <div class="num_keypad1" style=" margin-top:19px;"> <!-- Screen and clear key --> <div class="num_keys"> <!-- operators and other keys --> <span id="key1" onClick="AddDigit('1')">1</span> <span id="key2" onClick="AddDigit('2')">2</span> <span id="key3" onClick="AddDigit('3')">3</span> <span id="key4" onClick="AddDigit('4')">4</span> <span id="key5" onClick="AddDigit('5')">5</span> <span id="key6" onClick="AddDigit('6')">6</span> <span id="key7" onClick="AddDigit('7')">7</span> <span id="key8" onClick="AddDigit('8')">8</span> <span id="key9" onClick="AddDigit('9')">9</span> <span id="key0" onClick="AddDigit('0')" style="width: 200px;">0</span> <span id="keyback" class="clear" onClick="backspace()"> <div class="num_xBox">X</div></span> </div> </div> </form> 

使用上面的HTML代碼，我得到以下結果：

問題如下：

1. 我的數字在文字“ MM / DD / YYYY”下方。 我沒有得到應該如何使文本上方的數字

2. 我應該如何隱藏用戶輸入的文本並相應顯示其他文本，例如，如果用戶輸入05並顯示其他文本（例如“ 05 / DD / YYYY”），則“ MM”應該隱藏。

有人可以幫我嗎？

注意：通過輸入type = date或任何其他插件，我可以實現上述功能，但我的要求有所不同。 我必須使用HTML，CSS，JS來實現。

Answer 1

我將使用現成的內置數據選擇器來處理此類問題，因為它將內置所有錯誤檢查功能，以確保您以正確的格式輸入日期。

這樣，在輸入月份之前，您將無法檢查日期是否有效，屆時用戶將必須退格，這將是一個非常緩慢且笨拙的過程，並且對用戶不太友好。

無論如何，如果您堅持使用數字鍵盤，這就是我的處理方法。

1. 將日期放在全局數組中
2. 有一個全球指數櫃台
3. 根據索引計數器添加和刪除值

以下是上述內容的非常快速的示例

 var dateBits = ["D", "D", "M", "M", "Y", "Y", "Y", "Y"], letters = ["D", "D", "M", "M", "Y", "Y", "Y", "Y"], input = document.getElementById('pt_dob'), currentIndex = 0; function makeDate() { return dateBits[0] + dateBits[1] + "/" + dateBits[2] + dateBits[3] + "/" + dateBits[4] + dateBits[5] + dateBits[6] + dateBits[7]; } function AddDigit(number) { dateBits[currentIndex] = number; if (currentIndex < 8) { currentIndex++; } input.value = makeDate(); } function RemoveDigit() { if (currentIndex > 0) { currentIndex--; } dateBits[currentIndex] = letters[currentIndex]; input.value = makeDate(); } function Clear() { for (i = 0; i < letters.length; i++) { dateBits[i] = letters[i]; } currentIndex = 0; input.value = makeDate(); } input.value = makeDate(); // run this line onload or include this whole script at the bottom of the page to get your input to start with your text 

 .intxt1 { padding: 16px; border-radius: 3px; /* border: 0; */ width: 1017px; border: 1px solid #000; font-family: Droid Sans Mono; background: #fff; } #cursor { position: relative; z-index: 1; left: 32px; top: 2px; visibility: hidden; } .num_keys > span { display: inline-flex; width: 2em; height: 2em; align-items: center; justify-content: center; cursor: pointer; border: 1px solid black; } 

 <form Name="calc" method="post"> <div style="position:relative"><span id="cursor">_</span> <span class="txtplaceholder">MM/DD/YYYY</span><span style="z-index:100"><input class="intxt1" autocomplete="off" id="pt_dob" name="display" value="" type="text" autocomplete="off" readonly></span> <button class="cancel-icon" type="reset" onClick="Clear(); return false;">clear</button> </div> <div class="num_keypad1" style=" margin-top:19px;"> <!-- Screen and clear key --> <div class="num_keys"> <!-- operators and other keys --> <span id="key1" onClick="AddDigit('1')">1</span> <span id="key2" onClick="AddDigit('2')">2</span> <span id="key3" onClick="AddDigit('3')">3</span> <span id="key4" onClick="AddDigit('4')">4</span> <span id="key5" onClick="AddDigit('5')">5</span> <span id="key6" onClick="AddDigit('6')">6</span> <span id="key7" onClick="AddDigit('7')">7</span> <span id="key8" onClick="AddDigit('8')">8</span> <span id="key9" onClick="AddDigit('9')">9</span> <span id="key0" onClick="AddDigit('0')" style="width: 200px;">0</span> <span id="keyback" class="clear" onClick="RemoveDigit()"> <div class="num_xBox">X</div></span> </div> </div> </form> 

Answer 2

var text = "DD/MM/YYYY";

$(".textbox").on("focus blur", function(){
    $(".wrapper").toggleClass("focused");
});

$(".wrapper").click(function (e) {
    if (e.target == this) {
        var b = $(".textbox", this).focus();
    }
}).trigger("click");

$(".wrapper > .textbox").on("input", function(){
    var ipt = $(this).text().replace(/\u00A0/g, " ");
    $(".gray").text(text.substr(ipt.length, text.length));
}).trigger("input");

檢查這個小提琴http://jsfiddle.net/7sD2r/22/

Answer 3

如果我已經很好理解。 我認為一種解決方案是將用戶輸入存儲在隱藏字段中。 然后將此輸入轉換為分割數字，然后返回由分割值等組成的可見輸入值。