キーボード

1234567890-^
qwertyuiop@[
asdfghjkl;:]
zxcvbnm,./\

!"#$%&'()=~
QWERTYUIOP`{
ASDFGHJKL+*}
ZXCVBNM<>?_

ぬふあうえおやゆよわほへ
たていすかんなにらせせ゛
ちとしはきくまのりれけむ
つさそひこみもねるめろ゜

shift back clear あいう copy search


  view source
  JavaScript
  document.title = 'キーボード';

$(function(){
  function getAry(target){
    var ary = [];
    var text = $(target).text();
    $(target).hide();
    var textAry = text.split('\n');
    textAry.pop();
    textAry.forEach(function(v){
      ary.push(v.split(''));
    });
    return ary;
  }
  var ary = getAry('#text');
  var aryShift = getAry('#textShift');
  var aryAiueo = getAry('#textAiueo');
  console.log(aryAiueo);

  var btnText = $('#btn').text();
  $('#btn').hide();
  btnText = btnText.replace('\n','');
  var btns = btnText.split(' ');


  var $input = $('<input>');
  $('#demo').append($input);
  $ul = $('<ul>');
  $('#demo').append($ul);
  ary.forEach(function(rows,j){
  $li = $('<li>');
  $ul.append($li);
    rows.forEach(function(v,i){
      $a = $('<a>').text(v);
      $a.attr({def:v,shift:aryShift[j][i],aiueo:aryAiueo[j][i]});
      $li.append($a);

      $a.on('click', function(e){
        var v = $input.val();
        var t = $(this).text();
        $input.val(v+t);
      });
    })
  });
  $as = $('ul li a');

  function setShift(isOn, type="shift"){
    if(isOn){
      $as.each(function(){
        $a = $(this);
        t = $a.attr(type);
        $a.text(t).addClass(type);
      });
    } else {
      $as.each(function(){
        $a = $(this);
        t = $a.attr('def');
        $a.text(t).removeClass(type);
      });
    }
  }


  $div = $('<div>').addClass('btn');
  $('#demo').append($div);
  btns.forEach(function(v){
    $a = $('<a>').text(v);
    $div.append($a);
    $a.on('click', function(e){
      var $e = $(this);
      var v = $input.val();
      var t = $e.text();
      if(t==='shift'){
        if($e.hasClass('shift')){
          setShift(false);
        } else {
          setShift(true);
        }
        $e.toggleClass('shift');
      }
      if(t==='あいう'){
        if($e.hasClass('aiueo')){
          setShift(false,'aiueo');
        } else {
          setShift(true,'aiueo');
        }
        $e.toggleClass('aiueo');
      }
      if(t==='back'){
        v = v.slice(0,-1);
        $input.val(v);
      }
      if(t==='clear'){
        $input.val('');
      }
      if(t==='copy'){
        copyText(v);
      }
      if(t==='search' && v.length>1){
        window.open('https://www.google.com/search?q=' + v);
      }
    });
  })

  $(document).on('keydown', function(e){
        console.log(e.shiftKey);
    if(e.shiftKey){
      setShift(true);
    }
  });
  $(document).on('keyup', function(e){
      setShift(false);
  });
  

  function copyText(v){
    var listener = function(e){
      e.clipboardData.setData("text/plain" , v);  
      e.preventDefault();
    }
    navigator.clipboard.writeText(v);
    document.removeEventListener('copy', listener);
    document.addEventListener('copy' , listener);
    document.execCommand('copy');
  }


});
//Google 入力ツールをオンラインで試す
//https://www.google.co.jp/intl/ja/inputtools/try/
  CSS
  *{
  box-sizing:border-box;
}
html,body{
  overflow:hidden;
}

li:nth-child(1){
  padding-left:0px;
}
li:nth-child(2){
  padding-left:0px;
}
li:nth-child(3){
  padding-left:0px;
}
li:nth-child(4){
  padding-left:0px;
}
input{
  font-size:24px;
}
ul{
  user-select:none;
}
li a{
  display:inline-block;
  width:8%;
  height:8vw;
  line-height:8vw;
  border:1px solid #000;
  text-align:center;
  vertical-align: top;
  font-size:24px;
}

.btn a.shift,
li a.shift{
  background-color:rgba(0,0,255,0.1);
}
.btn a.aiueo,
li a.aiueo{
  background-color:rgba(255,0,0,0.1);
}
.btn a:hover,
li a:hover{
  background-color:rgba(0,0,0,0.2);
}
input{
  width:100%;
  height:8vw;
}

.btn a{
  user-select:none;
  display:inline-block;
  width:24%;
  height:8vw;
  line-height:8vw;
  border:1px solid #000;
  text-align:center;
  font-size:24px;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-keyboard/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。