JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- bootstrap form with multiple inline inputs -->
<div class="container">
<form role="form" method="post">
    <div class="row">
    <!--<div class="input group">-->
    <div class="col-md-6 col-lg-6">
        <label>Last / First / MI *</label>&nbsp;
        <input id="Lastname" class="form-inline" tabindex="1" type="text" placeholder="Last name" value="" />&nbsp;
        <input id="Firstname" class="form-inline" tabindex="2" type="text" placeholder="First name" value="" />&nbsp;
        <input id="MI" class="form-inline text-center" tabindex="3" type="text" value="" maxlength="1" style="max-width: 3em;" />

    </div>
   <!-- gutter -->
    <div class="col-md-1 col-lg-1">&nbsp;</div>
    <div class="col-md-5 col-lg-5">
        <label class="">Email</label>&nbsp;
        <input id="email" class="form-inline" tabindex="4" type="email" placeholder="Email" value="" />
    </div>
    
    </div>
</form>
</div>

JavaScript

// .toUpperCase()
$('#MI').keyup( function( event ){
    if ( event.which == 13 ) {
   		event.preventDefault();
  	}
    var str = $('#MI').val();
    $("#MI").val(str.toUpperCase());
});