Question

我正在寻找一种输入字段的方法，用于输入持久占位符文本的日期和时间。它应该：

支持连续显示具有格式的占位符文本，例如yyyy-mm-dd
仅允许编辑格式的数字（占位符文本）
填写当前的数字后，跳至下一组数字（日，月，年）

Chrome <input type="datetime-local">的默认控件之类的东西会很棒，但它需要适用于Firefox和Internet Explorer 11.

我开始实施一个解决方案，其中有两个input字段 - 一个在另一个之后。后面的一个是样式作为占位符，并更新另一个（前面）的文本修改。

我无法相信在任何地方都没有模拟这种行为......

我想在AngularJS中使用它，但任何类型的脚本都应该很容易适应。这将只处理一个固定的日期时间格式，因此它可以是非常简化的解决方案。

Answer 1

通过一些简单的Javascript，我做了你的建议。它与你的解决方案不同。它的功能与type = datetime-local完全不同，但需要花费更多的时间和精力才能完成。我希望这会对你有所帮助：

year.onkeydown = validateInput;
year.onkeyup = tab;
month.onkeydown = validateInput;
month.onkeyup = tab;
day.onkeydown = validateInput;
day.onkeyup = tab;

function validateInput() {
  /*Unicode stuff*/
  var character = [8, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 190];
  var unicode = event.keyCode ? event.keyCode : event.charCode;
  /*Filters Invalid Characters Like Letters*/
  if (character.indexOf(unicode) === -1) {
    return false;
  }
  /*Allow backspacing*/
  else if (character.indexOf(unicode) === 0) {
    return true;
  } 
  /*Only allow up to four characters in year*/
  else if (this.value.length >= 4 && this.id === 'year') {
    return false;
  }
  /*only allow up to two characters in month and date*/
  else if (this.value.length >= 2 && (this.id === 'day' || this.id === 'month')) {
    return false;
  }
}

/*This funciton puts the focus of the element to the next element, hence automatic tbbing*/
function tab() {
  if (this.value.length >= 4 && this.id === 'year') {
    this.nextElementSibling.focus();
  } else if (this.value.length >= 2 && (this.id === 'day' || this.id === 'month')) {
    this.nextElementSibling.focus();
  }
}

#year, #month, #day {
  width:30px;
}

<input type='text' id='year' placeholder='yyyy'>
<input type='text' id='month' placeholder='mm'>
<input type='text' id='day' placeholder='dd'>

祝你好运！

带有选择性编辑日期的HTML <input />（持久占位符文本）

1 个答案: