JSFiddle - React, Tailwind, and code Playground

HTML

<TABLE  align="center" width="100%" >
 <TBODY>
 <TR vAlign=top align=left>
 <TD  align="middle" width ="10%" style="padding-bottom: 1em;">
     <font color="black" size="2"><b>Username</b></TD>
 <td  width ="10%"> 
     <input type="text" align="left" onfocus="this.style.backgroundColor='#ccc'" onblur="this.style.backgroundColor='#fff'" class="input_1000_0_0 " name="user_id"  value="" size="10" 
     style="text-transform: uppercase" /> 
     </td> </TR>
</TBODY></TABLE>

JavaScript

$("[name='user_id']").change(function() {
     $(this).val($(this).val().toUpperCase());
});