JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<p>Green values in label are grabbed by <code>getAttribute</code>, red by jQuerys <code>attr</code>.</p>
<fieldset>
    <legend>jQuery Input Types</legend>
    <label id=text>
        <input type=text>
    </label>
    <label id=url>
        <input type=url>
    </label>
    <label id=email>
        <input type=email>
    </label>
    <label id=search>
        <input type=search>
    </label>
    <label id=search>
        <input id="test" type="number" value="" /> 
    </label>
    

</fieldset>
<p>Only confirmed browser where jQuery gets the right types is Opera.</p>

CSS

fieldset {
    width: 200px;
}
label {
    width: 200px;
    padding: 0 0 20px;
    display: block;
}
.jq {
    background: red;
}
.js {
    background: green;
}

JavaScript

$('input').each(function() {
    var lbl, jqType, jsType;
    lbl = $(this).closest('label');
    jqType = $(this).attr('type');
    jsType = this.getAttribute('type');
    lbl.prepend('<span class="jq">'+jqType+'</span>').prepend('<span class="js">'+jsType+'</span>');
});