絵文字入力フォーム

/*
 * 2016/04/02
 * @author t_hida
 */

// <style>タグを挿入
// CSS Design
(function(){
  var styleTag = document.createElement('style');
  var text = (function(){/*

.emojiContainer .emojiSwitch{
  width:100%;
  height:32px;
  line-height:32px;
  text-align:center;
  background-color:#ffcccc;
  border-radius:5px;
  cursor:pointer;
}
.emojiContainer .emojiPanel{
  width:100%;
  min-height:64px;
  padding:4px 0;
  position:relative;
  left:0;
  top:0;
  background-color:#ffcccc;
  border-radius:5px;
  -webkit-user-select:none;
  user-select:none;
}
.emojiContainer .emojiPanel a{
  display:block;
  width:32px;
  height:32px;
  line-height:32px;
  text-align:center;
  font-family:'Arial';
  font-weight:bold;
  cursor:pointer;
  color:#ff00c6;
}
.emojiContainer .emojiPanel ul{
  padding:0 32px;
}
.emojiContainer .emojiPanel ul:after{
  content:"";
  display:block;
  clear:both;
}
.emojiContainer .emojiPanel li{
  width:32px;
  height:32px;
  line-height:32px;
  text-align:center;
  float:left;
  cursor:pointer;
  background-color:#ffffff;
  border-radius:50%;;
}

.emojiContainer .emojiPanel .nextButton{
  position:absolute;
  right:0;
  top:32px;
  height:32px;
}
.emojiContainer .emojiPanel .prevButton{
  position:absolute;
  left:0;
  top:32px;
  height:32px;
}
.emojiContainer .emojiPanel .closeButton{
  position:absolute;
  right:0;
  top:0;
}


  */}).toString()
    .replace(/\/\/.*\n/g, '').replace(/(\n)/g, '').split('*')[1];
  //console.log(text);
  var styleTag = document.createElement('style');
  var textNode = document.createTextNode(text);
  styleTag.appendChild(textNode);
  document.getElementsByTagName('head')[0].appendChild(styleTag);
})();



$(function(){


  //絵文字一覧
  var emojiList = [
    'E347','E326','E343','E340','E33F',
    'E33C','E320','E344','E330','E339',
    'E33A','E33D','E33E','E327','E329','E341',
    'EB95','EB94','EB97','EB96','EB93',
    'E4F0','E510','E50F','EB36','E4D1',

    'E4EF','E7F5','E962','E960','E963',
    'E961','E964','E511','E980','E981',
    'E985','E983','E982','E984','E051',
    'E190','EB85','EB82','EB58','EB1F',
    'EB1E','EB56','E825','E808','E807',

    'E546','E527','E52B','E4F2','E539',
    'E523','E538','E528','E803','E800',
    'E801','E525','E526','E81C','E7F7','E81D',
    'E03C','E03D','E804','E805','E512',
    'E040','E014','E03F',

    'EB0C','E813','E814','EB04','EB60',
    'EB0D','EB0E','E823','E191','E02A',
    'EB1A','EB1B','EB1C','EB1D','E4B2',
    'E4B0','E806','E4B7','E4BA','E4B3','E4B4',
    'E7D9','E553','EB57','EB5B','EB5D',

    'EB20','EB59','E7FA','E53E','E195',
    'E4B9','EB31','EB2F','E038','E008',
    'E4C3','E005','E7F6','E4B5',
    'E4DD','EB2B','EB23','EB27','E506',
    'E82E','E82F','E830','E831','E832',

    'E833','E834','E835','E836','E837','E82C',
    'EAF0','EAF1','EAF2','EAF3',
    'E1BE','E1BF','E1B8','E1B7','E1BC','E1BA',
    'E030','E036','E035','E032','E034','E033',
    'E031','E02B','E02D','E02E','E02F','E02C',

    'E7E4','E7DF','E7E8','E7E6','E7EB',
    'E7E9','E7EA','E7D7',
    'E7D5','E7D3','E7D1','E7D4','E7D6','E7D2',
    'E4CD','E4D6','E4CF',
    'E000','E001','E002','E003','E004','E007'
  ];

  var emojiKeyboardReady = function(target){
    //要素準備
    var target = target || $('textarea');
    var form   = target.closest('form');
    var name = target.attr('name');
    var inputHidden = $('<input>').attr({
      type : 'hidden',
      name : name,
    });
    target.attr({name : '__' + name});
    form.append(inputHidden);
    var emojiContainer = $('<div>').addClass('emojiContainer');
    var emojiPanel = $('<div>').addClass('emojiPanel');
    var ul = $('<ul>').addClass('emojiButtons');
    var prevButton = $('<a>').addClass('prevButton').text('<')
      .attr({title: 'Prev'})
      .on('click', function(){
        page--;
        pageChange();
      });
    var nextButton = $('<a>').addClass('nextButton').text('>')
      .attr({title: 'Next'})
      .on('click', function(){
        page++;
        pageChange();
      });
    var closeButton = $('<a>').addClass('closeButton').text('x')
      .attr({title: 'Close'})
      .on('click', function(){
        switchPanel();
      });
    var emojiSwitch = $('<div>').addClass('emojiSwitch').text('絵文字入力')
      .on('click', function(){
        switchPanel();
      });

    //要素整理
    emojiPanel
      .append(ul)
      .append(prevButton)
      .append(nextButton)
      .append(closeButton);
    emojiContainer.append(emojiSwitch).append(emojiPanel);
    target.after(emojiContainer);

    emojiList.forEach(function(v, i){
      var li = $('<li>');
      var img = $('<img>').addClass('emoji');
      img.addClass('emoji_' + v).attr({alt: v, src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D'});
      li.append(img);
      ul.append(li);
    });
    var lis = ul.find('li');

    lis.on('click', function(){
      //絵文字入力
      var emojiCode = $(this).find('img').attr('alt');
      var emojiText = '<' + emojiCode + '>';
      var start = target[0].selectionStart || 0;
      var end = target[0].selectionEnd || 0;
      var prev = target.val().substring(0, start);
      var next = target.val().substring(end, target[0].length);
      target.val(prev + emojiText + next);
      target[0].selectionStart = start + emojiText.length;
      target[0].selectionEnd = end + emojiText.length;
    });


    //ページ処理
    var page = 0;
    var perPage = 16;
    var max = lis.length;
    var pageMax = Math.ceil(max/perPage) -1;

    console.log(max);
    var pageChange = function(){
      if(page > pageMax){
        page = 0;
      }
      if(page < 0){
        page = pageMax;
      }
      lis.hide();
      lis.slice(page*perPage, (page+1)*perPage).show();
      console.log(page);
    }


    //パネル表示ON/OFF
    var switchPanel = function(){
      if(emojiPanel.css('display') === 'none'){
        emojiPanel.show();
        emojiSwitch.hide();
      } else {
        emojiPanel.hide();
        emojiSwitch.show();
      }
    }


    //正規表現による、文字コード置換
    var resetEmoji = function(target){
      var txt = '';
      if(target[0].tagName.toLowerCase() == 'textarea'){
        txt = target.html()
        txt = txt.replace(/<img .*? class=".*?emoji_(.*?)".*? \/>/g, '<$1>');
      } else {
        txt = target.val().replace(/([\uE000-\uEBA1])/g, function () {
          return '<' + RegExp.$1.charCodeAt(0).toString(16).toUpperCase() + '>'         });
      }
      target.val(txt);
    }


    //投稿直前: 正規表現による、文字コード置換
    form.submit(function () {
      var txt = target.val();
      txt = txt.replace(/<([0-9A-F]{4})>/g, function(){  
        return String.fromCharCode(Number('0x' + arguments[1])) 
      });
      console.log(txt);
      inputHidden.val(txt);
      return false;
    });


    var init = function(){
      resetEmoji(target);
      pageChange();
      switchPanel();
    };
    init();
  };

  //対象指定
  $('textarea,input[type="text"]').each(function(){
    emojiKeyboardReady($(this));
  });

});


// - 2016/03 dummy:
//以下のコードをHTMLに挿入不要にする。
/*
<script>
    new MultiTypeTextArea().initialize($('textarea')[0],$('form')[0])
</script>
*/
MultiTypeTextArea = function(){return this};
MultiTypeTextArea.prototype = ({
  initialize: function (inputArea, form) {
  }
});

form{
  width:320px;
}
textarea,input{
  width:100%;
}

img.emoji{
  display:inline-block !important;
  width:14px !important;
  height:14px !important;
  margin:0px !important;
  padding:0px !important;
  background-image:url('emoji.png') !important;
  vertical-align:sub !important;
}

ul.thumbs li img.emoji{
  margin:0px;
}

.emoji_E000{ background-position: -0px -0px;}
.emoji_E009{ background-position: -0px -0px;}
.emoji_E00A{ background-position: -0px -0px;}
.emoji_E00C{ background-position: -0px -0px;}
.emoji_E001{ background-position: -14px -0px;}
.emoji_E002{ background-position: -28px -0px;}
.emoji_E003{ background-position: -42px -0px;}
.emoji_E004{ background-position: -56px -0px;}
.emoji_E005{ background-position: -70px -0px;}
.emoji_E973{ background-position: -70px -0px;}
.emoji_E006{ background-position: -84px -0px;}
.emoji_E007{ background-position: -98px -0px;}
.emoji_E02B{ background-position: -112px -0px;}
.emoji_E02C{ background-position: -126px -0px;}
.emoji_E02D{ background-position: -140px -0px;}
.emoji_E02E{ background-position: -154px -0px;}
.emoji_E02F{ background-position: -168px -0px;}
.emoji_E030{ background-position: -182px -0px;}
.emoji_E031{ background-position: -196px -0px;}
.emoji_E032{ background-position: -210px -0px;}
.emoji_E033{ background-position: -0px -14px;}
.emoji_E034{ background-position: -14px -14px;}
.emoji_E035{ background-position: -28px -14px;}
.emoji_E036{ background-position: -42px -14px;}
.emoji_E7D0{ background-position: -56px -14px;}
.emoji_E7D1{ background-position: -70px -14px;}
.emoji_E7D2{ background-position: -84px -14px;}
.emoji_E7D3{ background-position: -98px -14px;}
.emoji_E7D4{ background-position: -112px -14px;}
.emoji_E7D5{ background-position: -126px -14px;}
.emoji_E7D6{ background-position: -140px -14px;}
.emoji_E7D7{ background-position: -154px -14px;}
.emoji_E522{ background-position: -168px -14px;}
.emoji_E7DF{ background-position: -182px -14px;}
.emoji_E7E0{ background-position: -196px -14px;}
.emoji_E7E1{ background-position: -196px -14px;}
.emoji_E7E2{ background-position: -210px -14px;}
.emoji_E7E3{ background-position: -210px -14px;}
.emoji_E7E4{ background-position: -0px -28px;}
.emoji_E7EF{ background-position: -0px -28px;}
.emoji_E7E5{ background-position: -14px -28px;}
.emoji_E7E6{ background-position: -28px -28px;}
.emoji_E4C1{ background-position: -42px -28px;}
.emoji_E7E8{ background-position: -42px -28px;}
.emoji_E7E9{ background-position: -56px -28px;}
.emoji_E4B0{ background-position: -70px -28px;}
.emoji_E4B1{ background-position: -70px -28px;}
.emoji_E4B2{ background-position: -84px -28px;}
.emoji_E4B3{ background-position: -98px -28px;}
.emoji_E52C{ background-position: -98px -28px;}
.emoji_E52D{ background-position: -98px -28px;}
.emoji_E52E{ background-position: -98px -28px;}
.emoji_E4B4{ background-position: -112px -28px;}
.emoji_E4B5{ background-position: -126px -28px;}
.emoji_E4B6{ background-position: -140px -28px;}
.emoji_E4B7{ background-position: -154px -28px;}
.emoji_E4B9{ background-position: -168px -28px;}
.emoji_E7F5{ background-position: -182px -28px;}
.emoji_E7F6{ background-position: -196px -28px;}
.emoji_E7F7{ background-position: -210px -28px;}
.emoji_E506{ background-position: -0px -42px;}
.emoji_E507{ background-position: -0px -42px;}
.emoji_E508{ background-position: -0px -42px;}
.emoji_E980{ background-position: -14px -42px;}
.emoji_E981{ background-position: -28px -42px;}
.emoji_E982{ background-position: -42px -42px;}
.emoji_E988{ background-position: -42px -42px;}
.emoji_E983{ background-position: -56px -42px;}
.emoji_E987{ background-position: -56px -42px;}
.emoji_E960{ background-position: -70px -42px;}
.emoji_E4D6{ background-position: -84px -42px;}
.emoji_E4D7{ background-position: -84px -42px;}
.emoji_E198{ background-position: -98px -42px;}
.emoji_E53E{ background-position: -98px -42px;}
.emoji_E800{ background-position: -112px -42px;}
.emoji_E801{ background-position: -126px -42px;}
.emoji_E802{ background-position: -126px -42px;}
.emoji_E4F9{ background-position: -126px -42px;}
.emoji_EAF0{ background-position: -140px -42px;}
.emoji_E7FC{ background-position: -154px -42px;}
.emoji_E803{ background-position: -168px -42px;}
.emoji_E804{ background-position: -182px -42px;}
.emoji_E805{ background-position: -196px -42px;}
.emoji_E806{ background-position: -210px -42px;}
.emoji_E807{ background-position: -0px -56px;}
.emoji_EB1E{ background-position: -14px -56px;}
.emoji_EB1F{ background-position: -28px -56px;}
.emoji_E4EF{ background-position: -42px -56px;}
.emoji_E4F0{ background-position: -56px -56px;}
.emoji_E53B{ background-position: -56px -56px;}
.emoji_E545{ background-position: -70px -56px;}
.emoji_E546{ background-position: -70px -56px;}
.emoji_E547{ background-position: -70px -56px;}
.emoji_E502{ background-position: -70px -56px;}
.emoji_E4FF{ background-position: -70px -56px;}
.emoji_E500{ background-position: -70px -56px;}
.emoji_E501{ background-position: -70px -56px;}
.emoji_E503{ background-position: -70px -56px;}
.emoji_E54D{ background-position: -70px -56px;}
.emoji_E54F{ background-position: -70px -56px;}
.emoji_E50F{ background-position: -84px -56px;}
.emoji_E510{ background-position: -98px -56px;}
.emoji_E535{ background-position: -98px -56px;}
.emoji_E511{ background-position: -112px -56px;}
.emoji_E523{ background-position: -126px -56px;}
.emoji_E524{ background-position: -126px -56px;}
.emoji_E525{ background-position: -140px -56px;}
.emoji_E527{ background-position: -154px -56px;}
.emoji_E540{ background-position: -154px -56px;}
.emoji_E541{ background-position: -154px -56px;}
.emoji_E548{ background-position: -154px -56px;}
.emoji_E552{ background-position: -154px -56px;}
.emoji_E81C{ background-position: -168px -56px;}
.emoji_E80A{ background-position: -182px -56px;}
.emoji_E81D{ background-position: -196px -56px;}
.emoji_E81E{ background-position: -196px -56px;}
.emoji_EB1A{ background-position: -210px -56px;}
.emoji_EB1B{ background-position: -0px -70px;}
.emoji_EB1C{ background-position: -14px -70px;}
.emoji_EB1D{ background-position: -28px -70px;}
.emoji_E190{ background-position: -42px -70px;}
.emoji_E191{ background-position: -56px -70px;}
.emoji_EB93{ background-position: -70px -70px;}
.emoji_EB94{ background-position: -84px -70px;}
.emoji_EB95{ background-position: -98px -70px;}
.emoji_EB9D{ background-position: -98px -70px;}
.emoji_EBA1{ background-position: -98px -70px;}
.emoji_EAF1{ background-position: -112px -70px;}
.emoji_EAF2{ background-position: -126px -70px;}
.emoji_E1DB{ background-position: -140px -70px;}
.emoji_E553{ background-position: -140px -70px;}
.emoji_E4CC{ background-position: -154px -70px;}
.emoji_E4CD{ background-position: -154px -70px;}
.emoji_E4CE{ background-position: -168px -70px;}
.emoji_EB20{ background-position: -182px -70px;}
.emoji_E011{ background-position: -196px -70px;}
.emoji_EB65{ background-position: -196px -70px;}
.emoji_EB66{ background-position: -196px -70px;}
.emoji_EB63{ background-position: -196px -70px;}
.emoji_EB64{ background-position: -196px -70px;}
.emoji_EBA3{ background-position: -196px -70px;}
.emoji_EB67{ background-position: -196px -70px;}
.emoji_E012{ background-position: -210px -70px;}
.emoji_E013{ background-position: -0px -84px;}
.emoji_E016{ background-position: -0px -84px;}
.emoji_E014{ background-position: -14px -84px;}
.emoji_E015{ background-position: -28px -84px;}
.emoji_EB44{ background-position: -28px -84px;}
.emoji_E1D8{ background-position: -42px -84px;}
.emoji_E1B7{ background-position: -42px -84px;}
.emoji_E1D0{ background-position: -42px -84px;}
.emoji_E1B8{ background-position: -56px -84px;}
.emoji_E7EA{ background-position: -70px -84px;}
.emoji_E7EE{ background-position: -70px -84px;}
.emoji_E512{ background-position: -84px -84px;}
.emoji_EAF3{ background-position: -98px -84px;}
.emoji_E526{ background-position: -28px -98px;}
.emoji_E52A{ background-position: -42px -98px;}
.emoji_E52B{ background-position: -42px -98px;}
.emoji_E528{ background-position: -56px -98px;}
.emoji_E529{ background-position: -98px -98px;}
.emoji_EB92{ background-position: -98px -98px;}
.emoji_E4E2{ background-position: -140px -98px;}
.emoji_EB21{ background-position: -154px -98px;}
.emoji_EB81{ background-position: -168px -98px;}
.emoji_EB86{ background-position: -182px -98px;}
.emoji_EB87{ background-position: -182px -98px;}
.emoji_EB90{ background-position: -182px -98px;}
.emoji_EB8A{ background-position: -182px -98px;}
.emoji_EB82{ background-position: -182px -98px;}
.emoji_EB83{ background-position: -196px -98px;}
.emoji_EB84{ background-position: -210px -98px;}
.emoji_EB85{ background-position: -0px -112px;}
.emoji_EB8D{ background-position: -0px -112px;}
.emoji_EB36{ background-position: -14px -112px;}
.emoji_EB22{ background-position: -28px -112px;}
.emoji_E82B{ background-position: -42px -112px;}
.emoji_E82C{ background-position: -56px -112px;}
.emoji_E82E{ background-position: -84px -112px;}
.emoji_E82F{ background-position: -98px -112px;}
.emoji_E830{ background-position: -112px -112px;}
.emoji_E831{ background-position: -126px -112px;}
.emoji_E832{ background-position: -140px -112px;}
.emoji_E833{ background-position: -154px -112px;}
.emoji_E834{ background-position: -168px -112px;}
.emoji_E835{ background-position: -182px -112px;}
.emoji_E836{ background-position: -196px -112px;}
.emoji_E837{ background-position: -210px -112px;}
.emoji_E352{ background-position: -210px -140px;}
.emoji_EB27{ background-position: -210px -140px;}
.emoji_EB9F{ background-position: -210px -140px;}
.emoji_EB0C{ background-position: -0px -126px;}
.emoji_EB10{ background-position: -0px -126px;}
.emoji_EB12{ background-position: -0px -126px;}
.emoji_EB13{ background-position: -0px -126px;}
.emoji_EB14{ background-position: -0px -126px;}
.emoji_EB15{ background-position: -0px -126px;}
.emoji_EB16{ background-position: -0px -126px;}
.emoji_EB17{ background-position: -0px -126px;}
.emoji_E829{ background-position: -14px -126px;}
.emoji_EB0D{ background-position: -14px -126px;}
.emoji_EB11{ background-position: -14px -126px;}
.emoji_EB18{ background-position: -14px -126px;}
.emoji_EB0E{ background-position: -28px -126px;}
.emoji_EB0F{ background-position: -42px -126px;}
.emoji_E19B{ background-position: -56px -126px;}
.emoji_E19C{ background-position: -56px -126px;}
.emoji_E19D{ background-position: -56px -126px;}
.emoji_E19E{ background-position: -56px -126px;}
.emoji_E330{ background-position: -56px -126px;}
.emoji_E335{ background-position: -56px -126px;}
.emoji_E336{ background-position: -56px -126px;}
.emoji_E338{ background-position: -56px -126px;}
.emoji_E348{ background-position: -56px -126px;}
.emoji_E320{ background-position: -70px -126px;}
.emoji_E35A{ background-position: -70px -126px;}
.emoji_E323{ background-position: -84px -126px;}
.emoji_E321{ background-position: -98px -126px;}
.emoji_E33F{ background-position: -98px -126px;}
.emoji_E350{ background-position: -98px -126px;}
.emoji_E359{ background-position: -98px -126px;}
.emoji_E322{ background-position: -112px -126px;}
.emoji_E324{ background-position: -112px -126px;}
.emoji_EAF4{ background-position: -126px -126px;}
.emoji_E813{ background-position: -140px -126px;}
.emoji_E7FA{ background-position: -154px -126px;}
.emoji_E505{ background-position: -154px -126px;}
.emoji_EB19{ background-position: -168px -126px;}
.emoji_EB55{ background-position: -168px -126px;}
.emoji_EB61{ background-position: -168px -126px;}
.emoji_EB62{ background-position: -168px -126px;}
.emoji_E193{ background-position: -182px -126px;}
.emoji_E823{ background-position: -182px -126px;}
.emoji_E827{ background-position: -182px -126px;}
.emoji_EB60{ background-position: -196px -126px;}
.emoji_EB77{ background-position: -196px -126px;}
.emoji_E4FB{ background-position: -210px -126px;}
.emoji_EB56{ background-position: -210px -126px;}
.emoji_EB57{ background-position: -0px -140px;}
.emoji_EB96{ background-position: -14px -140px;}
.emoji_EB58{ background-position: -28px -140px;}
.emoji_E814{ background-position: -42px -140px;}
.emoji_E81A{ background-position: -42px -140px;}
.emoji_EAF5{ background-position: -56px -140px;}
.emoji_EBA0{ background-position: -56px -140px;}
.emoji_E342{ background-position: -70px -140px;}
.emoji_EB59{ background-position: -70px -140px;}
.emoji_EB04{ background-position: -84px -140px;}
.emoji_EB0B{ background-position: -84px -140px;}
.emoji_EB05{ background-position: -98px -140px;}
.emoji_EB06{ background-position: -112px -140px;}
.emoji_EB5A{ background-position: -126px -140px;}
.emoji_EB5B{ background-position: -140px -140px;}
.emoji_EB5C{ background-position: -154px -140px;}
.emoji_EB5D{ background-position: -168px -140px;}
.emoji_EB07{ background-position: -182px -140px;}
.emoji_E4FD{ background-position: -196px -140px;}
.emoji_EB08{ background-position: -196px -140px;}
.emoji_E808{ background-position: -112px -84px;}
.emoji_E4F1{ background-position: -126px -84px;}
.emoji_E536{ background-position: -140px -84px;}
.emoji_E19A{ background-position: -154px -84px;}
.emoji_E537{ background-position: -168px -84px;}
.emoji_E008{ background-position: -182px -84px;}
.emoji_E010{ background-position: -182px -84px;}
.emoji_E03B{ background-position: -182px -84px;}
.emoji_E018{ background-position: -196px -84px;}
.emoji_E019{ background-position: -210px -84px;}
.emoji_E01A{ background-position: -0px -98px;}
.emoji_E01E{ background-position: -14px -98px;}
.emoji_E01F{ background-position: -14px -98px;}
.emoji_E020{ background-position: -14px -98px;}
.emoji_E021{ background-position: -14px -98px;}
.emoji_E022{ background-position: -14px -98px;}
.emoji_E023{ background-position: -14px -98px;}
.emoji_E024{ background-position: -14px -98px;}
.emoji_E025{ background-position: -14px -98px;}
.emoji_E026{ background-position: -14px -98px;}
.emoji_E027{ background-position: -14px -98px;}
.emoji_E028{ background-position: -14px -98px;}
.emoji_E029{ background-position: -14px -98px;}
.emoji_E02A{ background-position: -14px -98px;}
.emoji_E4CF{ background-position: -28px -154px;}
.emoji_E4DB{ background-position: -28px -154px;}
.emoji_E4DC{ background-position: -42px -154px;}
.emoji_E195{ background-position: -56px -154px;}
.emoji_E4D0{ background-position: -70px -154px;}
.emoji_E7D8{ background-position: -84px -154px;}
.emoji_E7DA{ background-position: -84px -154px;}
.emoji_E4F2{ background-position: -98px -154px;}
.emoji_E4F3{ background-position: -112px -154px;}
.emoji_E4DD{ background-position: -126px -154px;}
.emoji_E4E0{ background-position: -126px -154px;}
.emoji_E4E3{ background-position: -126px -154px;}
.emoji_E538{ background-position: -140px -154px;}
.emoji_E824{ background-position: -154px -154px;}
.emoji_E4C9{ background-position: -168px -154px;}
.emoji_E539{ background-position: -182px -154px;}
.emoji_E4D1{ background-position: -196px -154px;}
.emoji_E4D2{ background-position: -196px -154px;}
.emoji_E825{ background-position: -210px -154px;}
.emoji_E826{ background-position: -210px -154px;}
.emoji_E01C{ background-position: -0px -168px;}
.emoji_E01B{ background-position: -0px -168px;}
.emoji_E7EB{ background-position: -14px -168px;}
.emoji_E984{ background-position: -28px -168px;}
.emoji_E01D{ background-position: -42px -168px;}
.emoji_E340{ background-position: -56px -168px;}
.emoji_E33E{ background-position: -70px -168px;}
.emoji_E331{ background-position: -84px -168px;}
.emoji_E325{ background-position: -98px -168px;}
.emoji_E344{ background-position: -98px -168px;}
.emoji_E345{ background-position: -98px -168px;}
.emoji_E33D{ background-position: -112px -168px;}
.emoji_E34E{ background-position: -112px -168px;}
.emoji_E326{ background-position: -126px -168px;}
.emoji_E327{ background-position: -140px -168px;}
.emoji_E32C{ background-position: -140px -168px;}
.emoji_E32D{ background-position: -140px -168px;}
.emoji_E34B{ background-position: -140px -168px;}
.emoji_E34C{ background-position: -140px -168px;}
.emoji_EB97{ background-position: -154px -168px;}
.emoji_E194{ background-position: -168px -168px;}
.emoji_E329{ background-position: -168px -168px;}
.emoji_E32A{ background-position: -168px -168px;}
.emoji_E347{ background-position: -182px -168px;}
.emoji_E32F{ background-position: -196px -168px;}
.emoji_E332{ background-position: -196px -168px;}
.emoji_E334{ background-position: -196px -168px;}
.emoji_E34A{ background-position: -196px -168px;}
.emoji_E33C{ background-position: -210px -168px;}
.emoji_E346{ background-position: -210px -168px;}
.emoji_E343{ background-position: -0px -182px;}
.emoji_E33A{ background-position: -14px -182px;}
.emoji_E339{ background-position: -28px -182px;}
.emoji_E34D{ background-position: -28px -182px;}
.emoji_E351{ background-position: -42px -182px;}
.emoji_EB26{ background-position: -42px -182px;}
.emoji_EB28{ background-position: -42px -182px;}
.emoji_E53A{ background-position: -56px -182px;}
.emoji_EB29{ background-position: -70px -182px;}
.emoji_EB2A{ background-position: -84px -182px;}
.emoji_E7D9{ background-position: -98px -182px;}
.emoji_E7F0{ background-position: -98px -182px;}
.emoji_EB2B{ background-position: -112px -182px;}
.emoji_EB2C{ background-position: -126px -182px;}
.emoji_EB91{ background-position: -126px -182px;}
.emoji_EB2D{ background-position: -140px -182px;}
.emoji_EB23{ background-position: -154px -182px;}
.emoji_EB48{ background-position: -168px -182px;}
.emoji_EB2E{ background-position: -168px -182px;}
.emoji_EB2F{ background-position: -182px -182px;}
.emoji_EB30{ background-position: -196px -182px;}
.emoji_EB31{ background-position: -210px -182px;}
.emoji_EAF6{ background-position: -0px -196px;}
.emoji_EAF7{ background-position: -14px -196px;}
.emoji_E4BA{ background-position: -28px -196px;}
.emoji_E038{ background-position: -42px -196px;}
.emoji_E4C3{ background-position: -56px -196px;}
.emoji_E03C{ background-position: -70px -196px;}
.emoji_E04E{ background-position: -70px -196px;}
.emoji_E04F{ background-position: -84px -196px;}
.emoji_E03D{ background-position: -98px -196px;}
.emoji_E050{ background-position: -112px -196px;}
.emoji_E051{ background-position: -126px -196px;}
.emoji_E05B{ background-position: -126px -196px;}
.emoji_E03E{ background-position: -140px -196px;}
.emoji_E03F{ background-position: -154px -196px;}
.emoji_E042{ background-position: -154px -196px;}
.emoji_E040{ background-position: -168px -196px;}
.emoji_E961{ background-position: -182px -196px;}
.emoji_E962{ background-position: -196px -196px;}
.emoji_E4C2{ background-position: -210px -196px;}
.emoji_E985{ background-position: -210px -196px;}
.emoji_E963{ background-position: -0px -210px;}
.emoji_E96A{ background-position: -0px -210px;}
.emoji_E964{ background-position: -14px -210px;}
.emoji_E1B9{ background-position: -28px -210px;}
.emoji_E1BA{ background-position: -42px -210px;}
.emoji_E1BB{ background-position: -42px -210px;}
.emoji_E1C8{ background-position: -42px -210px;}
.emoji_E1DD{ background-position: -42px -210px;}
.emoji_E1BC{ background-position: -56px -210px;}
.emoji_E1C9{ background-position: -70px -210px;}
.emoji_E1D9{ background-position: -70px -210px;}
.emoji_E1BD{ background-position: -70px -210px;}
.emoji_E7FF{ background-position: -70px -210px;}
.emoji_E32B{ background-position: -84px -210px;}
.emoji_E328{ background-position: -98px -210px;}
.emoji_E333{ background-position: -98px -210px;}
.emoji_E349{ background-position: -98px -210px;}
.emoji_E34F{ background-position: -98px -210px;}
.emoji_E7DC{ background-position: -112px -210px;}
.emoji_E1BE{ background-position: -112px -210px;}
.emoji_E1BF{ background-position: -126px -210px;}
.emoji_E1E0{ background-position: -126px -210px;}
.emoji_E986{ background-position: -140px -210px;}
.emoji_E33B{ background-position: -154px -210px;}
.emoji_E341{ background-position: -154px -210px;}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-emoji-picker/