JavaScript 如何从输入类型日期动态更新为输入类型文本字段

Question

我想用日期创建一个输入字段，但是当用户键入他的姓名时对于搜索，它也适用于同一领域。

更具体地说，我想制作一个带有 text 和 date 输入字段的 dynamic 输入字段在 JavaScript.

中的搜索过滤器按钮中

是否可以创建一个带有日期的字段，稍后当用户想按名称搜索时，他可以在同一字段中搜索名称，如果他想按日期搜索过滤器，他也可以在同一字段中搜索.

如果可以的话我该怎么做？

Answer 1

您可以使用setAttribute(attr, value) 属性来更改属性类型。 More can be found here

使用按钮的示例：

function searchByName(){
  document.getElementById("search").setAttribute("type","text");
}

function searchByDate(){
  document.getElementById("search").setAttribute("type","date");
}

<button onclick="searchByName();">Search by name</button> 
<button onclick="searchByDate();">Search by date</button>

<input type="date" name="search" id="search" />

编辑

如果你想根据输入动态改变，你可以试试这个：

const searchInput = document.getElementById("search");

searchInput.addEventListener("keydown",(e)=>{
    const isNumber = /\d/.test(e.key)
    if(isNumber){
        searchByDate();
    }
    else{
        searchByName()
    }
},{once:true});

function searchByName(){
  document.getElementById("search").setAttribute("type","text");
}

function searchByDate(){
  document.getElementById("search").setAttribute("type","date");
}

<input type="date" name="search" id="search" />

PS：上面的脚本只会运行一次。如果您的用户按下了第一个键一个数字，那么输入将保持为日期，否则，它将变为文本

JavaScript 如何从输入类型日期动态更新为输入类型文本字段

How to update from input type date to input type text field dynamically in JavaScript

html

javascript

css

input

dynamic