Please refer this code
ASP.Net
<script type="text/javascript">
function CreateEmail(userId) {
var txtEmail = document.getElementById('<%=txtEmail.ClientID %>');
var userId = userId.replace(/^\s+|\s+$/gm, '');
if (userId != '') {
txtEmail.value = userId + '@gmail.com';
}
}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
User Id
</td>
<td>
<asp:TextBox ID="txtUserId" runat="server" onblur="CreateEmail(this.value)" />
</td>
</tr>
<tr>
<td>
Email Id
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" />
</td>
</tr>
</table>
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript">
function CreateEmail(userId) {
var txtEmail = document.getElementById('txtEmail');
var userId = userId.replace(/^\s+|\s+$/gm, '');
if (userId != '') {
txtEmail.value = userId + '@gmail.com';
}
}
</script>
</head>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
User Id
</td>
<td>
<input name="txtUserId" type="text" id="txtUserId" onblur="CreateEmail(this.value)" />
</td>
</tr>
<tr>
<td>
Email Id
</td>
<td>
<input name="txtEmail" type="text" id="txtEmail" />
</td>
</tr>
</table>
</div>
</body>
</html>
Demo
