JSFiddle - React, Tailwind, and code Playground

by Hellfrom

HTML

<input type="text" id="mask" class="TCMask[(+380) ###-####,(+380) ___-____]" /><br />
<input id="fname" class="TCSuggest" autocomlete="off" /><br />
<input class="TCSuggest" autocomlete="off" /><br />

Тут если не написать API то я лох
для автокомплита нужно указать в Settings.Data.Suggest.Dictionaries id уже готового DOM input
например input#name Settings.Data.Suggest.Dictionaries

			function go(){
				Typecast.Init();
			}

go()

CSS

/*
Typecast 1.4 (release)
by Ara Pehlivanian (http://arapehlivanian.com)

This work is licensed under a Creative Commons Licence
http://creativecommons.org/licenses/by-nd/2.5/
*/

#SuggestOutputArea{
	border: solid 1px #ccc;
	background: #fff;
}

#SuggestOutputArea ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#SuggestOutputArea ul li:hover{
	cursor: pointer;
}
#SuggestOutputArea ul li.selected{
	background-color: #006;
	color: #fff;
}

JavaScript

/*
Typecast 1.4 (release)
by Ara Pehlivanian (http://arapehlivanian.com)

This work is licensed under a Creative Commons Licence
http://creativecommons.org/licenses/by-nd/2.5/
*/

var Typecast = {
	InitMask : false,
	InitSuggest : false,
    //добавил ф-ию для динамически добавленых полей
    Add:function (){
        this.Parse(document.body.getElementsByTagName("input"));
    },
	Init : function(){
		this.Parse(document.body.getElementsByTagName("input"));
		this.Behaviours.Mask.Init();
		this.Behaviours.Suggest.Init();
	},
	
	Parse : function(nodes){
		
		for(var i=0; i<nodes.length; i++){
			var node = nodes[i];

			if(node.type=="text" && node.className && node.className.indexOf("TC") != -1){
				if(!node.id) Typecast.Utils.GenerateID(node);
				
				var behaviourName = (node.className.indexOf("[") != -1) ? node.className.substring(node.className.indexOf("TC")+2, node.className.indexOf("[")) : node.className.substring(node.className.indexOf("TC")+2, node.className.length);
				
				Typecast["Init" + behaviourName] = true;
				Typecast.Behaviours[behaviourName].InitField(node);

				node.onfocus = Typecast.Behaviours[behaviourName].Run;
				node.onkeyup = Typecast.Behaviours[behaviourName].KeyHandler;
				node.onkeydown = Typecast.Behaviours[behaviourName].KeyHandler;
				node.onblur = Typecast.Behaviours[behaviourName].Stop;
				node.onmouseup = Typecast.Behaviours[behaviourName].MouseUp;
			}
		}
	},
	
	Behaviours : {
		Mask : {
			Init : function(){
			},
			
			InitField : function(field){
				var fieldData = [];
				if(!eval("Typecast.Config.Data.Mask.Masks." + field.id)){
					fieldData = field.className.substring(field.className.indexOf("[")+1, field.className.indexOf("]"))
				}else{
					fieldData = eval("Typecast.Config.Data.Mask.Masks." + field.id);
				}
				Typecast.Behaviours.Mask.ParseFieldData(field, fieldData);
				field.value = field.DefaultText.join("");
			},
			
			Run : function(e){
				e = (!e) ? window.event : e;
			},
			
			Stop :...