將輸入類型日期從 JavaScript 動態更改為 email 在 Safari 中不起作用

Question

當用戶單擊按鈕時，我正在嘗試將輸入類型日期更改為 email 和 email 日期。

下面是我的 HTML 代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Polyfill</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="email-to-date">
        <label>Email to Date:</label>
        <input type="email" name="emailDate" id="emailDate">
        <button id="btn-submit">Click me</button>
    </div>
    
    <script src="script.js"></script>
    <script src="node_modules/date-input-polyfill/date-input-polyfill.dist.js"></script>
</body>
</html>

Javascript代碼

document.querySelector("#btn-submit").addEventListener("click", function () {
    var elem_type = document.querySelector("#emailDate").type;
    var email_elem = document.querySelector("#emailDate");
    
    if(elem_type == 'email')
    { 
       email_elem.type = 'date';
    }
    else { 
      email_elem.type = 'email';
    }
});

它在 chrome 中完美運行，但是當我在 Safari 中嘗試此操作時，當用戶單擊按鈕 email 字段更改為日期時，反之亦然，但即使它是 email 字段時也會顯示輸入文本框。

未完全更改為 email 字段。

為了支持 safari 中的日期字段，我使用了 date-input-polyfill package。

請幫我解決這個問題。

Answer 1

我認為要讓它在所有瀏覽器中正常工作，您可能必須刪除 DOM 元素，然后添加一個具有所需輸入類型的新元素。

document.getElementById( "emailDate" ).remove();

然后創建一個新元素並將其添加到原始父級。 因此，您更改的 function 可能看起來像這樣。 （這有點冗長，但我保留了它，以便邏輯清晰。）

document.querySelector("#btn-submit").addEventListener("click", function () {
    var email_elem = document.querySelector("#emailDate");
    var elem_type = email_elem.type;
    
    /* Remove the current node, so that we create space for the new one. */
    email_elem.remove();
    
    /* Create the new input DOM node. */
    let newInput = document.createElement( "input" );
    
    /* Create attribute nodes for "id", "name" and "type" (and whatever else you need). We already know the
     * values for "id" and "name"; so we can set them here itself. Only for "type" we need an if..else. */
    let idAttr = document.createAttribute( "id" );
    idAttr.value = "emailDate";
    let nameAttr = document.createAttribute( "name" );
    nameAttr.value = "emailDate";
    let typeAttr = document.createAttribute( "type" );
    
    if( elem_type == 'email' )
    { 
       /* Add date type */
       typeAttr.value = "date";
    }
    else { 
       /* Add email type */
       typeAttr.value = "email";
    }
    
    /* Set the attribute nodes onto the new DOM element. */
    newInput.setAttributeNode( idAttr );
    newInput.setAttributeNode( nameAttr );
    newInput.setAttributeNode( typeAttr );
    
    /* Append the new DOM element as a child of the original parent node. */
    let parent = document.getElementById( "email-to-date" );
    parent.appendChild( newInput );
});

您將面臨一個顯示順序更改的問題，您必須使用 CSS 或使用parent.insertBefore()或parent.insertAfter()來控制。

將輸入類型日期從 JavaScript 動態更改為 email 在 Safari 中不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2021-01-03 18:25:34

將輸入類型日期從 JavaScript 動態更改為 email 在 Safari 中不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2021-01-03 18:25:34

解決方案1
1 已采納 2021-01-03 18:25:34