JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">  
    <div id="vodsearch">
        <div class="loginpassmain">
            <div class="loginpass">Поиск фильма</div>
            <input type="text" id="moviesearch" />
        </div>
    </div>
</div>

CSS

#vodsearch{
    position:absolute;
    z-index:15000;
    top:0px;
    left:0px;
    width: 960px;
    height: 540px;
}
.loginpassmain{
	text-align:center;
    position:absolute;
    top:120px;
    left:240px;
    width:400px;
    height:220px;
    #background-color:green;
}
#main
{
    position: fixed;
	z-index:2;
    left: 0px; top: 0px;
    width: 960px; height: 540px;
    overflow:hidden;
    background:#AAA;
}




#virtualKeyboard {
	position:fixed;
	top:0px;
	height:540px;
    width: 960px;;
   text-align: center;
	#background-color:#7b8490;
}

#keyboard{
    padding:10px;
    width:700px;
    margin: 0 auto;
    height:228px;
    display:block;
    padding-left: 22px;
    position:absolute;
    top:540px; 
	 
    left: 100px;
	 #top:800px;
	
     -webkit-transition: all 500ms;
    #background-color:#7b8490;
	 
	 
     box-shadow:  0 0 10px #111;
	 background-color:rgba(128,128,128,0.8);
 }
 
.keyb{
	opacity:1;
	
}

.show_keyboard
{
	opacity:1;
}

 
#keyboard:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

#keyboardHeader {position:relative;}
#keyboardHeader div {color:#fff; background-color:#7b8490;padding:3px; padding-left:15px; padding-right:15px; position:absolute; cursor:pointer; right:-10px; top:-40px;}
.closex {font-weight:bolder; color:#000;}

#keyboardCapitalLetter {display:none;}
#keyboardSmallLetter {display:block;}
#keyboardNumber {display:none;}
#keyboardSymbols {display:none;}

.button
{
    width:45px; 
    height:45px;
    background-color:#fff;
    position:relative;
    float:left;
    margin-right: 8px;
    margin-top: 5px;
    cursor:pointer;
    font-size:2em;

    /*box shadow*/
    -webkit-box-shadow: 0px 1px 5px #000000;-moz-box-shadow: 0px 1px 3px #000000;
    box-shadow: 0px 1px 5px #000000;
    /*box radius*/
    -moz-border-radius: 5px;
    /* border-radius: 5px; */
    /*gradient*/
    background: #ffffff; /* old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /*...

JavaScript

var jQ = null;




var Search ={};



var jsKeyboard = {
    settings: {
        buttonClass: "button", // default button class
        onclick: "jsKeyboard.write();", // default onclick event for button
        keyClass: "key", // default key class used to define style of text of the button
        text: {
            close: "close"
        }
    },
    "keyboard": [], // different keyboards can be set to this variable in order to switch between keyboards easily.
    init: function(elem, jqelement) {
    
// GET CURSOR POSITION
jQ.fn.getCursorPosition = function(){
    if(this.lengh == 0) return -1;
    return jQ(this).getSelectionStart();
}

jQ.fn.getSelectionStart = function(){
    if(this.lengh == 0) return -1;
    input = this[0];

    var pos = input.value.length;

    if (input.createTextRange) {
        var r = document.selection.createRange().duplicate();
        r.moveEnd('character', input.value.length);
        if (r.text == '')
        pos = input.value.length;
        pos = input.value.lastIndexOf(r.text);
    } else if(typeof(input.selectionStart)!="undefined")
    pos = input.selectionStart;

    return pos;
}

//SET CURSOR POSITION
jQ.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};


        jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard;
        jsKeyboard.keyboardLayout = elem;

        jsKeyboard.generateKeyboard("default");

        jsKeyboard.currentElement = jqelement;
        jsKeyboard.addKeyDownEvent( jqelement );
        jqelement.focus(); 
        jsKeyboard.show();

    },
    focus: function(t) {
        jsKeyboard.currentElement = jQ(t);
        jsKeyboard.show();
    },
   ...