javascript - 对于 MM/DD/YYYY 文本，仅显示用户未输入的文本

Question

我有一个如下图所示的页面

根据我的要求，用户只能从页面上提供的键盘输入数字。所以输入字段是只读的。

现在我想知道的是，当用户开始输入月份时，其他文本应保留在文本字段中，直到用户键入该内容为止。例如05/DD/YYYY 这样。因此，该文本将被隐藏。

如果我放置占位符，那么当用户开始输入数字时，所有文本都会消失。我不想要那个。所以我在单独的 span 标签 中使用了“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”应该隐藏。

谁能帮我解决这个问题？

注意: 使用 input 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>