JSFiddle - React, Tailwind, and code Playground

by Chris Fraser

HTML

<label>Example Email Which Breaks: test@BĂĽcher.ch</label>
<br></br>
<label>Input with Type = email</label>
<br></br>
<input id="email" type="email" value="">
<button id="ClickMe" type="button">Click Me!</button>
<br></br>
<label id="InputBoxValue">xxxx</label>
<br></br>
<hr></hr>
<label>Input with Type = text</label>
<br></br>
<input id="email2" type="text" value="">
<button id="ClickMe2" type="button">Click Me!</button>
<br></br>
<label id="InputBoxValue2">xxxx</label>
<br></br>
<hr></hr>

JavaScript

$('#ClickMe').click(function(){
    var inputvalue = $('#email').val();
    console.log($('#email'));
    console.log(document.getElementById('email').value);
    $('#InputBoxValue').text(inputvalue);
    $('#InputBoxValue').show();
});

$('#ClickMe2').click(function(){
    var inputvalue = $('#email2').val();
    $('#InputBoxValue2').text(inputvalue);
    $('#InputBoxValue2').show();
});

$(document).ready(function(){
    $('#InputBoxValue').hide();
    $('#InputBoxValue2').hide();
});