JSFiddle - React, Tailwind, and code Playground

by yurik417

HTML

<div class="demoWrap">
	<h2>Мгновенный транслит печатаемого текста</h2>

	<input type="text" class="demo1" value="">

	
	<h2>Транслит текста в другой элемент</h2>
	<p><input type="text" class="demo2_text"></p>
	<p><input type="text" class="demo2_translit"></p>

	
	
	<h2>Транслит НЕтекстового поля</h2>

	<div class="demo3">
		Это текст на самом деле написан кириллицей
	</div>
	
	
	<h2>Инъекция собственных правил</h2>
	<p><input type="text" class="demo4_text" value="ёжик"></p>
	<p><input type="text" class="demo4_translit"> default</p>
	<p><input type="text" class="demo4_translit2"> reg:'"ё"="yo"'</p>
	<p><input type="text" class="demo4_translit3"> reg:'"ё"="jooo","ж"="zzzzzz"'</p>
        
     <h2>Функция обратного вызова</h2>   
    <input type="text" class="demo5_text">

</div>

CSS

/*layout css*/
body { font:14px/1.2em Arial, Helvetica, sans-serif;}
.demoWrap input {
	width:300px;
	padding:15px 10px;
	background:#fff;
	border:4px solid #C1C9D5;
    margin-bottom:10px;
}
.demoWrap textarea {
	width:300px;
	padding:0.6em 10px;
	background:#fff;
	border:4px solid #C1C9D5;
	height:6em;
}
.demo3 { background:#f1f1f1; padding:10px; width:308px}
h2 { margin:30px 0 5px; font:20px/1.2em arial}
.info { margin-left:30px; padding:5px 10px; background:#FFE49F}

JavaScript

/*
 * jQuery liTranslit v 1.2
 * http://masscode.ru/index.php/k2/item/28-litranslit
 *
 * Copyright 2013, Linnik Yura
 * Free to use
 * 
 * Last Update 02.03.2014
 */

(function ($) {
    var methods = {
        init: function (options) {
			var o = {
				eventType:'keyup blur copy paste cut start',
				elAlias: $(this),				//Элемент, в который будет записываться результат транслитерации или false
				reg:'',							//'" "="-","ж"="zzzz"' or false or ''
				translated: function (el, text, eventType) {},   
				caseType: 'lower'				// lower(default), upper - регистр выходных данных
			};
			if (options) {
				$.extend(o, options); 
			}
			
			return this.each(function(){			
				var elName = $(this),
				elAlias = o.elAlias.css({wordWrap:'break-word'}),
				nameVal;
			
			elName.data({
				status:true	
			})
		
		var inser_trans = function(result,e) {
			if(o.caseType == 'upper'){
				result = result.toUpperCase();
			}
			if(elName.data('status') && o.elAlias){
				if (elAlias.prop("value") !== undefined) {
					elAlias.val(result);
				}else{
					elAlias.html(result);	
				}
			}
			if(result != ''){
				if (o.translated !== undefined) {
					var type;
					if(e == undefined){
						type = 'no event';
					}else{
						type = e.type;	
					}
					o.translated(elName, result, type);
				}
			}
			
		}
		
		var customReg = function(str){
			customArr = o.reg.split(',');
			for(var i=0;i<customArr.length; i++){
				var customItem = customArr[i].split('=');
				var regi = customItem[0].replace(/"/g,'');
				var newstr = customItem[1].replace(/"/g,'');
				var re = new RegExp(regi,"ig");
				str = str.replace(re,newstr)
			}
			return str	
		}
			
		var tr = function(el,e){
			if (el.prop("value") !== undefined) {
				nameVal = el.val();
			}else{
				nameVal = el.text();	
			}
			if(o.reg && o.reg != ''){
				nameVal = customReg(nameVal)
			}
			inser_trans(get_trans(nameVal),e);
		};
		elName.on(o.eventType,function (e) {
			var el =...