LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code





"We are committed to helpful and responsive customer service and knowledgeable and dependable technical support. "


LOGIN




CSS
.turuncubaslik-bold {
	color:#333;
font-size:14px;
 border-bottom: 1px dotted #000;
    text-decoration: none;	
	}
/******keyboard*******/

ul.keyboard {
  list-style-type: none;
  font-family: verdana;
  background-color: #fff;
  border-radius: 5px;
  padding: 0;
  width: 100%;
  height: 50%;
}

.keyboard li {
  cursor: pointer;
  display: inline;
  float: left;
  height: 18%;
 /** margin: auto; **/
  line-height: 50px;
  padding: 0;
  margin: 0.3% 0.6% 0.6% 0.2%;
  background-color: #ddd;
  color: black;
  vertical-align: middle;
  text-align: center;
  border-radius: 4px;
  font-size: 1vw;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.char {
    width: 5.75%;
    -webkit-transition: background-color 100ms;
}

.tab {
  width: 20%;
}

.at {
  width: 7.2%;
}

.last {
  margin-right: 0%;
}

.backspace {
  width: 14%;
}

.capslock {
  width: 12%
}

.capslock.on {
	background-color: #CA4200;
}

.return {
  width: 14%;
}

.shift {
  width: 7.2%;
}

.last {
  margin-right: 0;
}

.space {
  width: 99%;
}

.keyboard .touch {
	background-color: #CA4200;
}
JS
$(function() {
  
 // $('textarea').focus();
  
  var $caps = $('.capslock'),
      $char = $('.char');
  
  $caps.click(function() {
    if($caps.hasClass('on')) {
      $('.char,.capslock').each(function() {
        $(this).text($(this).text().toLowerCase());
      });
    $caps.removeClass('on');
      
    } else {
      $('.char,.capslock').each(function() {
        $(this).text($(this).text().toUpperCase());
      });
      $caps.addClass('on');
    }
  });
  
  $('li').click(function() {
    var t = this;
     $(this).addClass('touch');
     setTimeout(function() {
       $(t).removeClass('touch');
     },100);
  });
  
  var lastFocus,
      selectionStart,
      selectionEnd;

  $('textarea,input').on('focus', function() {
    $('textarea,input').removeClass('focus');
    $(this).addClass('focus');
  });
  
  $('textarea,input').on('blur', function() {
    lastFocus = this;
    selStart = this.selectionStart;
    selEnd = this.selectionEnd;
  });
  
  $('.char').click(function() {
    var char = $(this).text();
    sendChar(char);
  });
  
  $('.return').click(function() {
    sendChar('\n');
  });
  
  $('.space').click(function() {
    sendChar(' ');
  });
  
  $('.backspace').click(function() {
    backspace();
  });
  
  $('.tab').click(function() {
    tab();
  });
  
  function tab() {
    var $inputs = $('textarea,input');
    var currIndex = parseInt($(lastFocus).attr('tabIndex'));
    var highestIndex = -1;
    var selected = false;
    $inputs.each(function() {
      var index = parseInt($(this).attr('tabIndex'));
      if(index > highestIndex) {
        highestIndex = index;
      }
      if(index === currIndex+1) {
        $(this).focus();
        selected = true;
      }
    });
        
    if(!selected && currIndex === highestIndex) {
      $inputs.each(function() {
        var index = parseInt($(this).attr('tabIndex'));
        if(index === 1) {
          $(this).focus();
        }
      });
    }    
  }
  
  function backspace() {
     var orig = $(lastFocus).val();
     var updated = orig.substring(0, selStart-1) + orig.substring(selEnd, orig.length);
     $(lastFocus).val(updated);
     selEnd = --selStart;
     $(lastFocus).focus();
     lastFocus.selectionStart = selStart;
     lastFocus.selectionEnd = selEnd;
  }
  
  function sendChar(char) {
    var orig = $(lastFocus).val();
    var updated =  orig.substring(0, selStart) + char + orig.substring(selEnd, orig.lenght);
    $(lastFocus).val(updated);
    selEnd=++selStart;
    $(lastFocus).focus();
    lastFocus.selectionStart = selStart;
    lastFocus.selectionEnd = selEnd;
  };
  
});

document.getElementById("keyboard").focus();
Host Instantly Drag and Drop Website Builder

 

Description

Login page with virtual keyboard. Also you will find focused item.
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID