JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>

    <body>
        <input id="one" type="email" />
        <input id="two" />

        <script src="http://code.jquery.com/jquery.min.js"></script>
    </body>

</html>

CSS

input[type="text"] { border:0; background: #dfd; }

JavaScript

var $email = $('#one');
var $text = $('#two');

var errors = [];



/**
 * Logs errors in all browsers but only changes value in IE7 + IE9 (not 8)
 */
try { $email.attr('type', 'text'); }
catch(e) { errors.push('jQuery error changing type'); }
/**
 * Logs errors in all browsers but only changes value in IE
 */
try { $text.attr('type', 'text'); }
catch(e) { errors.push('jQuery error setting type'); }

/**
 * Using DOM method directly works in good browsers for #one and works everywhere for #two
 */
//try { $email[0].setAttribute('type', 'text'); }
//catch(e) { errors.push('DOM error changing type'); }
//try { $text[0].setAttribute('type', 'text'); }
//catch(e) { errors.push('DOM error setting type'); }

alert(errors.join("\n"));