对于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

如果我已经很好理解。 我认为一种解决方案是将用户输入存储在隐藏字段中。 然后将此输入转换为分割数字，然后返回由分割值等组成的可见输入值。