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代码我得到以下结果：

问题出现如下：

我的数字低于文本“MM / DD / YYYY”。我不知道如何将我的数字放在该文本之上
我应该如何隐藏用户输入的文本并相应地显示其他文本，例如如果用户输入05并显示“05 / DD / YYYY”之类的其他文本，“MM”应隐藏。

有人可以帮助我吗？

注意：使用输入类型=日期或任何其他插件，我可以实现上述功能，但我的要求是不同的。我必须使用HTML，CSS，JS来实现这一点。

Answer 1

我会为这种事情使用现成的数据选择器，因为它将内置所有错误检查以确保您以正确的格式输入日期。

你这样做的方式，在你进入月份之前，你无法检查这一天是否有效，到那时用户必须退格，这将是一个非常缓慢而笨重的过程，而不是用户友好。

无论如何，如果你坚持使用数字键盘，我就是这样做的。

将日期放在全局数组中
有一个全局索引计数器
根据索引计数器添加和删除值

以下是上述

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

对于MM / DD / YYYY文本，仅显示用户

3 个答案: