Транслитерация.html

<style>
#pic {
 width: calc(100% - 4px);
 height: 115px;
 position: relative;
line-height:17px;
text-align:center;
border:2px #cecece solid;
}

#firstNameUkr1 {
 padding-top: 20px;
 font-size: 14px;
}

#firstName1 {
 font-size: 15px;
 font-weight: bold;
 margin-top: 0px;
}

#lastNameUkr1 {
 font-size: 14px;
 margin-top: 3px;
}

#lastName1 {
 font-size: 15px;
 font-weight: bold;
 margin-top: 0px;
}
</style>
 <p><center> 
 <input style="width:48%;float:left;text-align:center;border:2px #cecece solid;" 
 class="form-control" name="name" placeholder="Введіть Ваше прізвище" type="text" /> 
 <input style="width:48%;float:right;text-align:center;border:2px #cecece solid;" 
 class="form-control" name="name2" placeholder="Введіть Ваше им'я" type="text" />
 </center></p>

<div style="clear:both;height:10px;"></div>

<div id="pic" style="float:left'"> <div id="firstNameUkr1"> 
<div class="firstNameUkr"> &nbsp;</div> </div> <div id="firstName1"> 
<div class="firstName"> &nbsp;</div> </div> <div id="lastNameUkr1"> 
<div class="lastNameUkr"> &nbsp;</div> </div> 
<div id="lastName1"> <div class="lastName"> &nbsp;</div> </div> </div> 

<center>
<button class="button-green" id="clear">Заново</button>
</center>
<br/>

*Транслитерация предназначена для фамилий и имен, записанных украинскими буквами
 <script>
!function(e){var t={"А":"A","а":"a","Б":"B","б":"b","В":"V","в":"v","Г":"H",
"г":"h","Ґ":"G","ґ":"g","Д":"D","д":"d","Е":"E","е":"e","Є":"Ye",
"є":"ie","Ж":"Zh","ж":"zh","З":"Z","з":"z","И":"Y","и":"y","І":"I","і":"i",
"Ї":"Yi","ї":"i","Й":"Y","й":"i","К":"K","к":"k","Л":"L","л":"l",
"М":"M","м":"m","Н":"N","н":"n","О":"O","о":"o","П":"P","п":"p","Р":"R",
"р":"r","С":"S","с":"s","Т":"T","т":"t","У":"U","у":"u","Ф":"F","ф":"f",
"Х":"Kh","х":"kh","Ц":"Ts","ц":"ts","Ч":"Ch","ч":"ch","Ш":"Sh","ш":"sh",
"Щ":"Shch","щ":"shch","Ю":"Yu","ю":"iu","Я":"Ya","я":"ia"," ":" ",
"зг":"zgh","Зг":"Zgh","-":"-"},
a=function(a){a=e.trim(a).split("");
var n=[],r=!1;return e(a).each(function(e,i)
{return r?void(r=!1):(i=0==e||a.hasOwnProperty(e)&&" "==a[e-1]||
"-"==a[e-1]?i.toUpperCase():i.toLowerCase(),-1!=["З","з"].indexOf(i)&&
a.hasOwnProperty(e+1)&&"г"==a[e+1]&&(i+="г",r=!0),
void(t.hasOwnProperty(i)&&n.push(t[i])))}),n.join("").toUpperCase()},
n=function(){var t=e('input[name="name"]').val(),n=a(t);
e(".firstName").text(n),e(".firstNameUkr").text(t.toUpperCase())},
r=function(){var t=e('input[name="name2"]').val(),n=a(t);
e(".lastName").text(n),e(".lastNameUkr").text(t.toUpperCase())};
e('input[name="name"]').on("keyup",n),e('input[name="name2"]').on("keyup",r),
e("#clear").click(function(){e('input[name="name"]').val(""),
e(".firstName").text(""),e(".lastName").text(""),e('input[name="name2"]').val(""),
e(".firstNameUkr").text(""),e(".lastNameUkr").text("")})}(jQuery);
</script>