Question

我想做一个看起来像日期输入的文本输入（检查代码片段）。我希望它是无缝的，因为我现在如何设置它我无法按退格键删除它之前的字段值。是否可以用一个文本字段来完成？如果不是，我将如何使用 javascript 做到这一点。（我没有包括我已经写的javascript）

请问我是否需要澄清任何事情。

#birthday{
    font-size:13px;
    padding: 5px;
    width:120px;
    border-radius: 8px;
    border-style: solid;
    border-color: RGBA(0,0,0,0.1);
    }
    #birthday-span{
        margin-left: -133px;
        color: RGBA(0,0,0,0.4);
        font-weight: bold;
        font-size: 15px;
        
    }
    .input-birthday{
        font-size: 13px;
        border: 0;
        outline: 0;
        margin: 3px;
        color: black;
    }
    #month,#day{
        width: 25px;
    }
    #year{
        width: 35px;
    }

<input type='text' id='birthday' disabled>
                    <span id='birthday-span'>
                        <input type='text' name='month' id='month' placeholder="MM" maxlength='2' class='input-birthday'>/
                        <input type='text' name='day' id='day' placeholder="DD" maxlength='2' class='input-birthday'>/
                        <input type='text' name='year' id='year' placeholder="YYYY" class='input-birthday' maxlength="4">
                    </span>

Answer 1

我希望这就是你要找的。

document.getElementById("day").onkeydown = function(e) {
  handleChange("day", e)
}
document.getElementById("year").onkeydown = function(e) {
  handleChange("year",e)
}

function handleChange(id, e) {
  document.getElementById(id).value.length === 0 && e.key === "Backspace" && document.getElementById(id === "day" ? "month" : id === "year" ? "day" : "").focus()
}

#birthday {
  font-weight: bold;
  font-size: 15px;
}

.input-birthday {
  font-size: 13px;
  border: 0;
  outline: 0;
  margin: 3px;
  color: black;
}

#month,
#day {
  width: 25px;
}

#year {
  width: 35px;
}

<span id='birthday'>
    <input type='text' name='month' id='month' placeholder="MM" maxlength='2' class='input-birthday'>/
    <input type='text' name='day' id='day' placeholder="DD" maxlength='2' class='input-birthday'>/
    <input type='text' name='year' id='year' placeholder="YYYY" class='input-birthday' maxlength="4" >
</span>

Answer 2

您可以使用`document.createElement("elementTagName") 创建元素。即：

如果我可以写下面来创建一个 div 元素：

let div = document.createElement("div");

您也可以使用 appenChild() 方法添加任何您想要子元素的元素，如下所示：

let a = document.createElement("a");
div.appendChild(a);

上面的代码等于下面的：

<div> 
    <a></<a>
</div>

您可以搜索 Javascript DOM(document object manupulation) 方法。我希望这对您的问题有所帮助。

Answer 3

这是对您评论的回答它包括切换到最大长度已达到的下一个输入，并在退格键上切换到前一个输入

document.getElementById("day").onkeydown = function(e) {
  handleChange("day", e)
}
document.getElementById("year").onkeydown = function(e) {
  handleChange("year", e)
}
document.getElementById("month").onkeydown = function(e) {
  handleChange("month", e)
}

function handleChange(id, e) {
  document.getElementById(id).value.length === 0 && e.key === "Backspace" && document.getElementById(id === "day" ? "month" : id === "year" && "day") && document.getElementById(id === "day" ? "month" : id === "year" ? "day" : "").focus()

  document.getElementById(id).value.length === document.getElementById(id).maxLength && e.key !== "Backspace" && document.getElementById(id === "month" ? "day" : id === "day" && "year") && document.getElementById(id === "month" ? "day" : id === "day" ? "year" : "").focus()

}

#birthday {
  font-weight: bold;
  font-size: 15px;
}

.input-birthday {
  font-size: 13px;
  border: 0;
  outline: 0;
  margin: 3px;
  color: black;
}

#month,
#day {
  width: 25px;
}

#year {
  width: 35px;
}

<span id='birthday'>
    <input type='text' name='month' id='month' placeholder="MM" maxlength='2' class='input-birthday'>/
    <input type='text' name='day' id='day' placeholder="DD" maxlength='2' class='input-birthday'>/
    <input type='text' name='year' id='year' placeholder="YYYY" class='input-birthday' maxlength="4" >
</span>

Answer 4

我之前帖子的动态版本 @提姆

Object.values(document.getElementById("birthday").children).map(el => {
  el.onkeydown = function(e) {
    handleChange(el.name, el, e)
  }
})

function handleChange(id, element, e) {
  element.value.length === 0 && e.key === "Backspace" &&
    element.previousElementSibling && element.previousElementSibling.focus()

  element.value.length === element.maxLength && e.key !== "Backspace" && element.nextElementSibling && element.nextElementSibling.focus()

}

#birthday {
  font-weight: bold;
  font-size: 15px;
}

.input-birthday {
  font-size: 13px;
  border: 0;
  outline: 0;
  margin: 3px;
  color: black;
  width: 35px;
}

<span id='birthday'>
    <input type='text' name='month' placeholder="MM" maxlength='2' class='input-birthday'>/
    <input type='text' name='day' placeholder="DD" maxlength='2' class='input-birthday'>/
    <input type='text' name='year' placeholder="YYYY" maxlength="4"  class='input-birthday' >
</span>

将文本输入样式设置为日期输入

4 个答案: