簡體   English   中英

將文本輸入樣式化為日期輸入

[英]Styling a text input as a date input

我想做一個看起來像日期輸入的文本輸入(檢查代碼片段)。 我希望它是無縫的,因為我現在如何設置它我不能按退格鍵來刪除它之前的字段的值。 是否可以使用一個文本字段來完成? 如果不是,我將如何使用 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>

我希望這就是你要找的。

 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>

您可以使用 `document.createElement("elementTagName") 創建元素。 IE:

如果我可以在下面寫下創建 div 元素:

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

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

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

上面的代碼在下面是相等的:

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

您可以搜索 Javascript DOM(文檔 object 操作)方法。 我希望這對您的問題有所幫助。

這是您評論的答案,它包括切換到最大長度已達到的下一個輸入,以及在退格鍵上切換到上一個輸入

 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>

我之前@Teemu 帖子的動態版本

 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM