JSFiddle - React, Tailwind, and code Playground

by limon

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input id="input">
<br>
<button id="type-text">type="text"</button>
<br>
<button id="type-password">type="password"</button>
<br>
<button id="type-email">type="email"</button>
<br>
<button id="type-file">type="file"</button> - FAIL IN SAFARI

<div id="debug-info"></div>

JavaScript

var input = $('#input')[0];

$('button[id^=type-]').on('click', function() {
  var type = $(this).attr('id').replace('type-', '');
  input.type = type;
  
  $('#debug-info').html(
  	'Trying to change the input type to <strong>' + type + '</strong>.<br>' +
    'Actual input type is <strong>' + input.type + '<strong>.'
  );
  
  if (type == input.type) {
    $('#debug-info').css('color', 'green');
  } else {
    $('#debug-info').css('color', 'red');
  }
});