在Safari中无法将输入类型日期动态更改为来自JavaScript的电子邮件

debugcn 发表于 Dev

普里亚

我正在尝试将输入类型日期更改为电子邮件，并将用户单击按钮时的电子邮件更改为日期。

下面是我的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中尝试使用此功能时，只要用户单击更改为日期的按钮电子邮件字段，反之亦然，但是即使是电子邮件字段，在单击输入文本框时它也会显示日期选择器。

尚未完全更改为电子邮件字段。

为了支持Safari中的日期字段，我使用了date-input-polyfill包。

请帮助我解决这个问题。

斯瑞·库玛（Sree Kumar）

我认为，要使其在所有浏览器中都能正常运行，您可能必须删除DOM元素，然后添加具有所需输入类型的新元素。

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

然后创建一个新元素，并将其添加到原始父元素中。因此，您更改的功能可能看起来像这样。（这有点冗长，但是我这样保留了它，以便使逻辑清晰可见。）

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()。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。