JSFiddle - React, Tailwind, and code Playground
HTML
<table align="center">
<tr>
<td>
<input name="firstname" class="text_area" maxlength=20 placeholder="Name" type="text" onKeyPress="return onlyAlphabets(event,this)" required id="ValidName" value="" />
</td>
<tr>
<td>
<input type="text" onkeypress="return isNumber(event)" id="volpincode" maxlength=7 name="pincode" value="" required placeholder="Pincode" class="text_area">
</td>
<td><input style="width:300px" type="text" onkeypress="return keyup(event)" class="facebookUrl" name="facebook" value="http://www.facebook.com/$facebook"></td>
<td>
<input style="width:30px" disabled="disabled" type="text" name="facebook" value="+91" />
</td>
</tr>
</tr>
</table>
JavaScript
function onlyAlphabets(e, t) {
var charCode;
try {
if (window.event) {
charCode = window.event.keyCode;
}
else if (e) {
charCode = e.which;
}
else { return true; }
if (charCode == 8 || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
$('input.facebookUrl').keyup(function(){
if (
($(this).val().length > 0) && ($(this).val().substr(0,24) != 'http://www.facebook.com/')
|| ($(this).val() == '')
){
$(this).val('http://www.facebook.com/');
}
});