cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="content __wait">
<div class="links">
  <a href="https://twitter.com/intent/tweet?url=https://codepen.io/levchenkod/full/VYKXOR&text=The%20thing%20that%20adds%20emoji%20in%20textareas%20%E2%9C%8C%20&hashtags=twemojiInput,twemoji,emoji" target="_blank">Tweet if you like <img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f493.png"></a>
  <a href="https://github.com/LevchenkoD/twemoji-input" target="_blank">Pull if you want <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" widht="18" height="18" x="0px" y="0px"
	 viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
<g>
	<path d="M11.8,17.7c-0.4,0.1-0.6-0.2-0.6-0.4c0-0.3,0-1.2,0-2.4c0-0.8-0.3-1.3-0.6-1.6c1.9-0.2,3.9-0.9,3.9-4.2
		c0-0.9-0.3-1.7-0.9-2.3c0.1-0.2,0.4-1.1-0.1-2.3c-0.7-0.2-2.4,0.9-2.4,0.9c-0.7-0.2-1.4-0.3-2.1-0.3S7.6,5.3,6.9,5.5
		c0,0-1.6-1.1-2.4-0.9c-0.5,1.2-0.2,2-0.1,2.3C3.9,7.4,3.6,8.2,3.6,9.2c0,3.3,2,4,3.9,4.2C7.3,13.6,7,14,6.9,14.5
		c-0.5,0.2-1.7,0.6-2.5-0.7C4,13,3.2,12.9,3.2,12.9c-0.8,0-0.1,0.5-0.1,0.5C3.7,13.7,4,14.7,4,14.7c0.5,1.5,2.9,1,2.9,1
		c0,0.7,0,1.4,0,1.6c0,0.2-0.2,0.5-0.6,0.4C3,16.6,0.5,13.4,0.5,9.6C0.5,4.9,4.3,1,9.1,1s8.6,3.8,8.6,8.6
		C17.6,13.4,15.2,16.6,11.8,17.7z"/>
</g>
</svg></a>
</div>
<h1>Twemoji</h1>
<h3>input plugin</h3>
<div class="_secondary">
<div class="form">
<button class="post">Send</button>
<input id="name" placeholder="Your Name Goes Here...">
<textarea class="_twemoji_input" rows="7"></textarea>
<p class="_disclaimer"><img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f64c.png"> Show your message to the world <img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f30d.png"></p>
</div>

<ul class="messages"></ul>
  <button class="_huge load_more_msgs">Show more <img src="https://twemoji.maxcdn.com/36x36/1f447.png" class="emoji"></button>
</div>
</div>
            
          
!
            
              ._twemoji_textarea {
    min-height: 150px;
    width: 350px;
    border: solid 1px silver;
    background: #fff;
}


._twemoji_wrap{
    display: inline-block;
    position: relative;
}

._twemoji_box{
    opacity: 0.8;
    position: absolute;
    z-index: 9;
    top: 10px;
    right: 10px;
    padding: 10px;
    background-image: url(data:image/png;base64,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);
    background-size: 32px 64px;
    background-repeat: no-repeat;
    background-position: center -6px;
    cursor: pointer;
}

._twemoji_box:hover, ._twemoji_wrap.__open  ._twemoji_box{
    opacity: 0.8;
}

._twemoji_box:active, ._twemoji_wrap.__open  ._twemoji_box:active{
    opacity: 1;
    background-position: center -38px;
}

._twemoji_popover{
    display: none;
    position: absolute;
    top: 45px;
    right: 10px;
    width: 185px;
    height: 150px;
    background: rgba(0,0,0,0.8);
    z-index: 9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    -webkit-border-radius: 5px 0 5px 5px;
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
}

._twemoji_popover::before {
	content: '';
	position: absolute;
	border-bottom: solid 10px rgba(0,0,0,0.8);
	border-right: solid 9px transparent;
	border-left: solid 9px transparent;
	top: -10px;
	right: 0px;
}

._twemoji_wrap.__open ._twemoji_popover{
    display: block;
}

._twemoji_list_wrap{
    overflow: hidden;
    width: 195px;
    height: 150px;
}

._twemoji_popover ul{
    clear: both;
    margin: 0;
    padding: 5px;
    width: 160px;
}

._twemoji_popover li{
    display: inline-block;
    width: 32px;
    height: 32px;
    float: left;
}

._twemoji_popover li img{
    width: 24px;
    height: 24px;
}

textarea._twemoji_input{
	display: none;
}

._twemoji_textarea .emoji{
    width: 24px;
}

.scroll_wrap{
    overflow: hidden;
    position: relative;
}

.scroll_slave{
    padding-right: 20px; /*Manually hide scrollbar*/
    overflow-y: auto;
}


.scroll_slave::-webkit-scrollbar {
    display: none;
}

.scroll_master{
    position: absolute;
    top: -10px;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;
    opacity: 0;
    z-index: 99;
}

.scroll_bar{
    position: absolute;
    right: 5px;
    margin-top: 8px;
    top: 0;
    width: 7px;
    min-height: 15px;
    background: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    opacity: 0.6;
}

.scroll_master:hover ~ .scroll_bar{
    opacity: 0.8;
}

.scroll_master:active ~ .scroll_bar{
    opacity: 0.9;
}

@import url(https://fonts.googleapis.com/css?family=Amatic+SC);

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,greek-ext,greek,vietnamese,latin-ext,cyrillic,cyrillic-ext);

body{
	min-height: 100vh ;
	background: #FABD4A;
  min-width: 480px;
	font-family: 'Open Sans', helvetica, sans-serif;
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}

*{
	outline: none;
}


h1, h2, h3, h4, h5, h6{
	font-family: 'Amatic SC', cursive;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
}

h1{
	padding-top: 130px;
	font-size: 72pt;
}

h3{
	margin-bottom: 100px;
	font-size: 24pt;
}



.content{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
  padding-bottom: 200px;
}

.content, ._secondary{
	-webkit-transition: 0.3s ease-in;
	-moz-transition: 0.3s ease-in;
	-o-transition: 0.3s ease-in;
	-ms-transition: 0.3s ease-in;
	transition: 0.3s ease-in;
}

.content.__wait{
	-webkit-transform: translateY(10vh);
	-moz-transform: translateY(10vh);
	-o-transform: translateY(10vh);
	-ms-transform: translateY(10vh);
	transform: translateY(10vh);
}

.content.__wait > ._secondary{
	opacity: 0;
}

._twemoji_textarea, input {
	min-height: 25px;
	width: 350px;
	border: solid 1px rgba(255,255,255,0.8);
	padding: 10px 25px;
	color: #002E40;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	border-radius: 25px 0 0 0;
	font-size: 11pt;
}

._twemoji_textarea{
	font-size: 21pt;
	border-radius: 0 0 0 25px;
	min-height: 50px;
  height: 50px;
	border-top: none;
	margin-top: 2px ;
  padding-left: 16px;
  padding-right: 34px;
}

._twemoji_textarea:focus, input:focus {
	border-color: #ffffff;
	background: #ffffff;
}

button {
	padding: 50px 10px;

	width: 70px;
	float: right;
	border: none;
	border: solid 1px rgba(255,255,255,0.8);
	background: rgba(255,255,255,0.8);
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	font-size: 12pt;
	text-align: center;
	border-radius: 0 25px 25px 0;
	cursor: pointer;
	color: #002E40;
}

button:hover{
	border-color: #ffffff;
	background: #ffffff;
	color: #002E40;
}

button:active{
	border-color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.9);
	color: #002E40;
	box-shadow: none;
	-webkit-transform: translateY(1px);
	-moz-transform: translateY(1px);
	-o-transform: translateY(1px);
	-ms-transform: translateY(1px);
	transform: translateY(1px);
}

._disclaimer{
	color: white;
	font-size: 8pt;
	padding: 0 25px;
}

ul.messages {
	margin: 150px 0 0;
	padding: 0;
}

ul.messages li {
	width: 100%;
	background: white;
	border-radius: 25px;
	padding: 10px 25px;
	list-style-type: none;
	margin: 15px 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

ul.messages li h4 {
	text-align: left;
	color: #002E40;
	font-size: 16pt;
}

ul.messages li p{
	font-size: 10pt;
	margin-bottom: 0;
}

.emoji{
  width: 24px;
}

.links a{
  font-size: 10pt;
  color: white;
  margin-right: 30px;
  text-decoration: none;
}

.links a:hover, .links a:focus{
  text-decoration: underline;
}

.links a:active{
  color: rgba(255,255,255,0.8);
}

.links .emoji{
  width: 18px;
}

button._huge.load_more_msgs {
  width: 100%;
  border-radius: 25px;
  padding: 10px;
  margin-top: 40px;
}
            
          
!
            
              
var TwemojiInput = function(obj){
    /* Declarative Part */

    var Emoji = ["๐Ÿ€„","๐Ÿƒ","๐Ÿ…ฐ","๐Ÿ…ฑ","๐Ÿ…พ","๐Ÿ…ฟ","๐Ÿ†Ž","๐Ÿ†‘","๐Ÿ†’","๐Ÿ†“","๐Ÿ†”","๐Ÿ†•","๐Ÿ†–","๐Ÿ†—","๐Ÿ†˜","๐Ÿ†™","๐Ÿ†š","๐Ÿ‡ฆ","๐Ÿ‡ง","๐Ÿ‡จ๐Ÿ‡ณ","๐Ÿ‡จ","๐Ÿ‡ฉ๐Ÿ‡ช","๐Ÿ‡ฉ","๐Ÿ‡ช๐Ÿ‡ธ","๐Ÿ‡ช","๐Ÿ‡ซ๐Ÿ‡ท","๐Ÿ‡ซ","๐Ÿ‡ฌ๐Ÿ‡ง","๐Ÿ‡ฌ","๐Ÿ‡ญ","๐Ÿ‡ฎ๐Ÿ‡น","๐Ÿ‡ฎ","๐Ÿ‡ฏ๐Ÿ‡ต","๐Ÿ‡ฏ","๐Ÿ‡ฐ๐Ÿ‡ท","๐Ÿ‡ฐ","๐Ÿ‡ฑ","๐Ÿ‡ฒ","๐Ÿ‡ณ","๐Ÿ‡ด","๐Ÿ‡ต","๐Ÿ‡ถ","๐Ÿ‡ท๐Ÿ‡บ","๐Ÿ‡ท","๐Ÿ‡ธ","๐Ÿ‡น","๐Ÿ‡บ๐Ÿ‡ธ","๐Ÿ‡บ","๐Ÿ‡ป","๐Ÿ‡ผ","๐Ÿ‡ฝ","๐Ÿ‡พ","๐Ÿ‡ฟ","๐Ÿˆ","๐Ÿˆ‚","๐Ÿˆš","๐Ÿˆฏ","๐Ÿˆฒ","๐Ÿˆณ","๐Ÿˆด","๐Ÿˆต","๐Ÿˆถ","๐Ÿˆท","๐Ÿˆธ","๐Ÿˆน","๐Ÿˆบ","๐Ÿ‰","๐Ÿ‰‘","๐ŸŒ€","๐ŸŒ","๐ŸŒ‚","๐ŸŒƒ","๐ŸŒ„","๐ŸŒ…","๐ŸŒ†","๐ŸŒ‡","๐ŸŒˆ","๐ŸŒ‰","๐ŸŒŠ","๐ŸŒ‹","๐ŸŒŒ","๐ŸŒ","๐ŸŒŽ","๐ŸŒ","๐ŸŒ","๐ŸŒ‘","๐ŸŒ’","๐ŸŒ“","๐ŸŒ”","๐ŸŒ•","๐ŸŒ–","๐ŸŒ—","๐ŸŒ˜","๐ŸŒ™","๐ŸŒš","๐ŸŒ›","๐ŸŒœ","๐ŸŒ","๐ŸŒž","๐ŸŒŸ","๐ŸŒ ","๐ŸŒฐ","๐ŸŒฑ","๐ŸŒฒ","๐ŸŒณ","๐ŸŒด","๐ŸŒต","๐ŸŒท","๐ŸŒธ","๐ŸŒน","๐ŸŒบ","๐ŸŒป","๐ŸŒผ","๐ŸŒฝ","๐ŸŒพ","๐ŸŒฟ","๐Ÿ€","๐Ÿ","๐Ÿ‚","๐Ÿƒ","๐Ÿ„","๐Ÿ…","๐Ÿ†","๐Ÿ‡","๐Ÿˆ","๐Ÿ‰","๐ŸŠ","๐Ÿ‹","๐ŸŒ","๐Ÿ","๐ŸŽ","๐Ÿ","๐Ÿ","๐Ÿ‘","๐Ÿ’","๐Ÿ“","๐Ÿ”","๐Ÿ•","๐Ÿ–","๐Ÿ—","๐Ÿ˜","๐Ÿ™","๐Ÿš","๐Ÿ›","๐Ÿœ","๐Ÿ","๐Ÿž","๐ŸŸ","๐Ÿ ","๐Ÿก","๐Ÿข","๐Ÿฃ","๐Ÿค","๐Ÿฅ","๐Ÿฆ","๐Ÿง","๐Ÿจ","๐Ÿฉ","๐Ÿช","๐Ÿซ","๐Ÿฌ","๐Ÿญ","๐Ÿฎ","๐Ÿฏ","๐Ÿฐ","๐Ÿฑ","๐Ÿฒ","๐Ÿณ","๐Ÿด","๐Ÿต","๐Ÿถ","๐Ÿท","๐Ÿธ","๐Ÿน","๐Ÿบ","๐Ÿป","๐Ÿผ","๐ŸŽ€","๐ŸŽ","๐ŸŽ‚","๐ŸŽƒ","๐ŸŽ„","๐ŸŽ…","๐ŸŽ†","๐ŸŽ‡","๐ŸŽˆ","๐ŸŽ‰","๐ŸŽŠ","๐ŸŽ‹","๐ŸŽŒ","๐ŸŽ","๐ŸŽŽ","๐ŸŽ","๐ŸŽ","๐ŸŽ‘","๐ŸŽ’","๐ŸŽ“","๐ŸŽ ","๐ŸŽก","๐ŸŽข","๐ŸŽฃ","๐ŸŽค","๐ŸŽฅ","๐ŸŽฆ","๐ŸŽง","๐ŸŽจ","๐ŸŽฉ","๐ŸŽช","๐ŸŽซ","๐ŸŽฌ","๐ŸŽญ","๐ŸŽฎ","๐ŸŽฏ","๐ŸŽฐ","๐ŸŽฑ","๐ŸŽฒ","๐ŸŽณ","๐ŸŽด","๐ŸŽต","๐ŸŽถ","๐ŸŽท","๐ŸŽธ","๐ŸŽน","๐ŸŽบ","๐ŸŽป","๐ŸŽผ","๐ŸŽฝ","๐ŸŽพ","๐ŸŽฟ","๐Ÿ€","๐Ÿ","๐Ÿ‚","๐Ÿƒ","๐Ÿ„","๐Ÿ†","๐Ÿ‡","๐Ÿˆ","๐Ÿ‰","๐ŸŠ","๐Ÿ ","๐Ÿก","๐Ÿข","๐Ÿฃ","๐Ÿค","๐Ÿฅ","๐Ÿฆ","๐Ÿง","๐Ÿจ","๐Ÿฉ","๐Ÿช","๐Ÿซ","๐Ÿฌ","๐Ÿญ","๐Ÿฎ","๐Ÿฏ","๐Ÿฐ","๐Ÿ€","๐Ÿ","๐Ÿ‚","๐Ÿƒ","๐Ÿ„","๐Ÿ…","๐Ÿ†","๐Ÿ‡","๐Ÿˆ","๐Ÿ‰","๐ŸŠ","๐Ÿ‹","๐ŸŒ","๐Ÿ","๐ŸŽ","๐Ÿ","๐Ÿ","๐Ÿ‘","๐Ÿ’","๐Ÿ“","๐Ÿ”","๐Ÿ•","๐Ÿ–","๐Ÿ—","๐Ÿ˜","๐Ÿ™","๐Ÿš","๐Ÿ›","๐Ÿœ","๐Ÿ","๐Ÿž","๐ŸŸ","๐Ÿ ","๐Ÿก","๐Ÿข","๐Ÿฃ","๐Ÿค","๐Ÿฅ","๐Ÿฆ","๐Ÿง","๐Ÿจ","๐Ÿฉ","๐Ÿช","๐Ÿซ","๐Ÿฌ","๐Ÿญ","๐Ÿฎ","๐Ÿฏ","๐Ÿฐ","๐Ÿฑ","๐Ÿฒ","๐Ÿณ","๐Ÿด","๐Ÿต","๐Ÿถ","๐Ÿท","๐Ÿธ","๐Ÿน","๐Ÿบ","๐Ÿป","๐Ÿผ","๐Ÿฝ","๐Ÿพ","๐Ÿ‘€","๐Ÿ‘‚","๐Ÿ‘ƒ","๐Ÿ‘„","๐Ÿ‘…","๐Ÿ‘†","๐Ÿ‘‡","๐Ÿ‘ˆ","๐Ÿ‘‰","๐Ÿ‘Š","๐Ÿ‘‹","๐Ÿ‘Œ","๐Ÿ‘","๐Ÿ‘Ž","๐Ÿ‘","๐Ÿ‘","๐Ÿ‘‘","๐Ÿ‘’","๐Ÿ‘“","๐Ÿ‘”","๐Ÿ‘•","๐Ÿ‘–","๐Ÿ‘—","๐Ÿ‘˜","๐Ÿ‘™","๐Ÿ‘š","๐Ÿ‘›","๐Ÿ‘œ","๐Ÿ‘","๐Ÿ‘ž","๐Ÿ‘Ÿ","๐Ÿ‘ ","๐Ÿ‘ก","๐Ÿ‘ข","๐Ÿ‘ฃ","๐Ÿ‘ค","๐Ÿ‘ฅ","๐Ÿ‘ฆ","๐Ÿ‘ง","๐Ÿ‘จ","๐Ÿ‘ฉ","๐Ÿ‘ช","๐Ÿ‘ซ","๐Ÿ‘ฌ","๐Ÿ‘ญ","๐Ÿ‘ฎ","๐Ÿ‘ฏ","๐Ÿ‘ฐ","๐Ÿ‘ฑ","๐Ÿ‘ฒ","๐Ÿ‘ณ","๐Ÿ‘ด","๐Ÿ‘ต","๐Ÿ‘ถ","๐Ÿ‘ท","๐Ÿ‘ธ","๐Ÿ‘น","๐Ÿ‘บ","๐Ÿ‘ป","๐Ÿ‘ผ","๐Ÿ‘ฝ","๐Ÿ‘พ","๐Ÿ‘ฟ","๐Ÿ’€","๐Ÿ’","๐Ÿ’‚","๐Ÿ’ƒ","๐Ÿ’„","๐Ÿ’…","๐Ÿ’†","๐Ÿ’‡","๐Ÿ’ˆ","๐Ÿ’‰","๐Ÿ’Š","๐Ÿ’‹","๐Ÿ’Œ","๐Ÿ’","๐Ÿ’Ž","๐Ÿ’","๐Ÿ’","๐Ÿ’‘","๐Ÿ’’","๐Ÿ’“","๐Ÿ’”","๐Ÿ’•","๐Ÿ’–","๐Ÿ’—","๐Ÿ’˜","๐Ÿ’™","๐Ÿ’š","๐Ÿ’›","๐Ÿ’œ","๐Ÿ’","๐Ÿ’ž","๐Ÿ’Ÿ","๐Ÿ’ ","๐Ÿ’ก","๐Ÿ’ข","๐Ÿ’ฃ","๐Ÿ’ค","๐Ÿ’ฅ","๐Ÿ’ฆ","๐Ÿ’ง","๐Ÿ’จ","๐Ÿ’ฉ","๐Ÿ’ช","๐Ÿ’ซ","๐Ÿ’ฌ","๐Ÿ’ญ","๐Ÿ’ฎ","๐Ÿ’ฏ","๐Ÿ’ฐ","๐Ÿ’ฑ","๐Ÿ’ฒ","๐Ÿ’ณ","๐Ÿ’ด","๐Ÿ’ต","๐Ÿ’ถ","๐Ÿ’ท","๐Ÿ’ธ","๐Ÿ’น","๐Ÿ’บ","๐Ÿ’ป","๐Ÿ’ผ","๐Ÿ’ฝ","๐Ÿ’พ","๐Ÿ’ฟ","๐Ÿ“€","๐Ÿ“","๐Ÿ“‚","๐Ÿ“ƒ","๐Ÿ“„","๐Ÿ“…","๐Ÿ“†","๐Ÿ“‡","๐Ÿ“ˆ","๐Ÿ“‰","๐Ÿ“Š","๐Ÿ“‹","๐Ÿ“Œ","๐Ÿ“","๐Ÿ“Ž","๐Ÿ“","๐Ÿ“","๐Ÿ“‘","๐Ÿ“’","๐Ÿ““","๐Ÿ“”","๐Ÿ“•","๐Ÿ“–","๐Ÿ“—","๐Ÿ“˜","๐Ÿ“™","๐Ÿ“š","๐Ÿ“›","๐Ÿ“œ","๐Ÿ“","๐Ÿ“ž","๐Ÿ“Ÿ","๐Ÿ“ ","๐Ÿ“ก","๐Ÿ“ข","๐Ÿ“ฃ","๐Ÿ“ค","๐Ÿ“ฅ","๐Ÿ“ฆ","๐Ÿ“ง","๐Ÿ“จ","๐Ÿ“ฉ","๐Ÿ“ช","๐Ÿ“ซ","๐Ÿ“ฌ","๐Ÿ“ญ","๐Ÿ“ฎ","๐Ÿ“ฏ","๐Ÿ“ฐ","๐Ÿ“ฑ","๐Ÿ“ฒ","๐Ÿ“ณ","๐Ÿ“ด","๐Ÿ“ต","๐Ÿ“ถ","๐Ÿ“ท","๐Ÿ“น","๐Ÿ“บ","๐Ÿ“ป","๐Ÿ“ผ","๐Ÿ”€","๐Ÿ”","๐Ÿ”‚","๐Ÿ”ƒ","๐Ÿ”„","๐Ÿ”…","๐Ÿ”†","๐Ÿ”‡","๐Ÿ”ˆ","๐Ÿ”‰","๐Ÿ”Š","๐Ÿ”‹","๐Ÿ”Œ","๐Ÿ”","๐Ÿ”Ž","๐Ÿ”","๐Ÿ”","๐Ÿ”‘","๐Ÿ”’","๐Ÿ”“","๐Ÿ””","๐Ÿ”•","๐Ÿ”–","๐Ÿ”—","๐Ÿ”˜","๐Ÿ”™","๐Ÿ”š","๐Ÿ”›","๐Ÿ”œ","๐Ÿ”","๐Ÿ”ž","๐Ÿ”Ÿ","๐Ÿ” ","๐Ÿ”ก","๐Ÿ”ข","๐Ÿ”ฃ","๐Ÿ”ค","๐Ÿ”ฅ","๐Ÿ”ฆ","๐Ÿ”ง","๐Ÿ”จ","๐Ÿ”ฉ","๐Ÿ”ช","๐Ÿ”ซ","๐Ÿ”ฌ","๐Ÿ”ญ","๐Ÿ”ฎ","๐Ÿ”ฏ","๐Ÿ”ฐ","๐Ÿ”ฑ","๐Ÿ”ฒ","๐Ÿ”ณ","๐Ÿ”ด","๐Ÿ”ต","๐Ÿ”ถ","๐Ÿ”ท","๐Ÿ”ธ","๐Ÿ”น","๐Ÿ”บ","๐Ÿ”ป","๐Ÿ”ผ","๐Ÿ”ฝ","๐Ÿ•","๐Ÿ•‘","๐Ÿ•’","๐Ÿ•“","๐Ÿ•”","๐Ÿ••","๐Ÿ•–","๐Ÿ•—","๐Ÿ•˜","๐Ÿ•™","๐Ÿ•š","๐Ÿ•›","๐Ÿ•œ","๐Ÿ•","๐Ÿ•ž","๐Ÿ•Ÿ","๐Ÿ• ","๐Ÿ•ก","๐Ÿ•ข","๐Ÿ•ฃ","๐Ÿ•ค","๐Ÿ•ฅ","๐Ÿ•ฆ","๐Ÿ•ง","๐Ÿ—ป","๐Ÿ—ผ","๐Ÿ—ฝ","๐Ÿ—พ","๐Ÿ—ฟ","๐Ÿ˜€","๐Ÿ˜","๐Ÿ˜‚","๐Ÿ˜ƒ","๐Ÿ˜„","๐Ÿ˜…","๐Ÿ˜†","๐Ÿ˜‡","๐Ÿ˜ˆ","๐Ÿ˜‰","๐Ÿ˜Š","๐Ÿ˜‹","๐Ÿ˜Œ","๐Ÿ˜","๐Ÿ˜Ž","๐Ÿ˜","๐Ÿ˜","๐Ÿ˜‘","๐Ÿ˜’","๐Ÿ˜“","๐Ÿ˜”","๐Ÿ˜•","๐Ÿ˜–","๐Ÿ˜—","๐Ÿ˜˜","๐Ÿ˜™","๐Ÿ˜š","๐Ÿ˜›","๐Ÿ˜œ","๐Ÿ˜","๐Ÿ˜ž","๐Ÿ˜Ÿ","๐Ÿ˜ ","๐Ÿ˜ก","๐Ÿ˜ข","๐Ÿ˜ฃ","๐Ÿ˜ค","๐Ÿ˜ฅ","๐Ÿ˜ฆ","๐Ÿ˜ง","๐Ÿ˜จ","๐Ÿ˜ฉ","๐Ÿ˜ช","๐Ÿ˜ซ","๐Ÿ˜ฌ","๐Ÿ˜ญ","๐Ÿ˜ฎ","๐Ÿ˜ฏ","๐Ÿ˜ฐ","๐Ÿ˜ฑ","๐Ÿ˜ฒ","๐Ÿ˜ณ","๐Ÿ˜ด","๐Ÿ˜ต","๐Ÿ˜ถ","๐Ÿ˜ท","๐Ÿ˜ธ","๐Ÿ˜น","๐Ÿ˜บ","๐Ÿ˜ป","๐Ÿ˜ผ","๐Ÿ˜ฝ","๐Ÿ˜พ","๐Ÿ˜ฟ","๐Ÿ™€","๐Ÿ™…","๐Ÿ™†","๐Ÿ™‡","๐Ÿ™ˆ","๐Ÿ™‰","๐Ÿ™Š","๐Ÿ™‹","๐Ÿ™Œ","๐Ÿ™","๐Ÿ™Ž","๐Ÿ™","๐Ÿš€","๐Ÿš","๐Ÿš‚","๐Ÿšƒ","๐Ÿš„","๐Ÿš…","๐Ÿš†","๐Ÿš‡","๐Ÿšˆ","๐Ÿš‰","๐ŸšŠ","๐Ÿš‹","๐ŸšŒ","๐Ÿš","๐ŸšŽ","๐Ÿš","๐Ÿš","๐Ÿš‘","๐Ÿš’","๐Ÿš“","๐Ÿš”","๐Ÿš•","๐Ÿš–","๐Ÿš—","๐Ÿš˜","๐Ÿš™","๐Ÿšš","๐Ÿš›","๐Ÿšœ","๐Ÿš","๐Ÿšž","๐ŸšŸ","๐Ÿš ","๐Ÿšก","๐Ÿšข","๐Ÿšฃ","๐Ÿšค","๐Ÿšฅ","๐Ÿšฆ","๐Ÿšง","๐Ÿšจ","๐Ÿšฉ","๐Ÿšช","๐Ÿšซ","๐Ÿšฌ","๐Ÿšญ","๐Ÿšฎ","๐Ÿšฏ","๐Ÿšฐ","๐Ÿšฑ","๐Ÿšฒ","๐Ÿšณ","๐Ÿšด","๐Ÿšต","๐Ÿšถ","๐Ÿšท","๐Ÿšธ","๐Ÿšน","๐Ÿšบ","๐Ÿšป","๐Ÿšผ","๐Ÿšฝ","๐Ÿšพ","๐Ÿšฟ","๐Ÿ›€","๐Ÿ›","๐Ÿ›‚","๐Ÿ›ƒ","๐Ÿ›„","๐Ÿ›…","โ€ผ","โ‰","โ„ข","โ„น","โ†”","โ†•","โ†–","โ†—","โ†˜","โ†™","โ†ฉ","โ†ช","#โƒฃ","โŒš","โŒ›","โฉ","โช","โซ","โฌ","โฐ","โณ","โ“‚","โ–ช","โ–ซ","โ–ถ","โ—€","โ—ป","โ—ผ","โ—ฝ","โ—พ","โ˜€","โ˜","โ˜Ž","โ˜‘","โ˜”","โ˜•","โ˜","โ˜บ","โ™ˆ","โ™‰","โ™Š","โ™‹","โ™Œ","โ™","โ™Ž","โ™","โ™","โ™‘","โ™’","โ™“","โ™ ","โ™ฃ","โ™ฅ","โ™ฆ","โ™จ","โ™ป","โ™ฟ","โš“","โš ","โšก","โšช","โšซ","โšฝ","โšพ","โ›„","โ›…","โ›Ž","โ›”","โ›ช","โ›ฒ","โ›ณ","โ›ต","โ›บ","โ›ฝ","โœ‚","โœ…","โœˆ","โœ‰","โœŠ","โœ‹","โœŒ","โœ","โœ’","โœ”","โœ–","โœจ","โœณ","โœด","โ„","โ‡","โŒ","โŽ","โ“","โ”","โ•","โ—","โค","โž•","โž–","โž—","โžก","โžฐ","โžฟ","โคด","โคต","โฌ…","โฌ†","โฌ‡","โฌ›","โฌœ","โญ","โญ•","0โƒฃ","ใ€ฐ","ใ€ฝ","1โƒฃ","2โƒฃ","ใŠ—","ใŠ™","3โƒฃ","4โƒฃ","5โƒฃ","6โƒฃ","7โƒฃ","8โƒฃ","9โƒฃ","ยฉ","ยฎ","๎”Š"],

        prefix = '_twemoji',
        size = 32,
        saveAsImg = false,

        list = document.createElement('ul'),
        listWrap = document.createElement('div'),
        popover = document.createElement('div'),
        wrapper = document.createElement('div'),
        customTextarea = document.createElement('iframe'),
        box = document.createElement('div'),
        lastCaretPostion = 0;

    /* Contenteditable iframe with simple API. You can access it with TwemojiInput.Editor */

    var Editor = function(){
      var t = this;

      t.init();
    };

    Editor.prototype.addStyles = function(){
      var t = this;

      t.styles = document.createElement('style');
      t.styles.setAttribute('type', 'text/css');
      t.styles.innerText = 'body{line-height: 18px;font-family: "Open Sans", helvetica, sans-serif;} img.emoji{height: 14px; width: 14px;}';

      t.content.head.appendChild(t.styles);
    };

    Editor.prototype.focus = function(){
      var t = this;
      t.content.body.focus();
    };

    Editor.prototype.insertImage = function(img){
      var t = this;

      function insert(){
        var id = "rand" + (Math.random() + "").slice(2),
            sel;

        if (t.content.queryCommandSupported("InsertHTML")) {
            t.content.execCommand("insertHTML", false, img);
        } else if ( (sel = t.content.selection) && sel.type != "Control") {
            var range = sel.createRange();
            range.pasteHTML(img);
            range.collapse(false);
            range.select();
        };

        t.updateMirror();

        return t.content.getElementById(id);
      };

      t.focus();

      return insert();
    };

    Editor.prototype.value = function(value){
      var t = this;

      if(value){
        t.content.body.innerHTML = value;
        t.updateMirror();
        return value;
      } else {
        return t.content.body.innerHTML;
      }
    };

    Editor.prototype.updateMirror = function(){
      var t = this,
          value = t.value();

      value = saveAsImg ? value : value.replace(/<img.*?alt=".*?/g,'').replace(/".?src=.*?>/g,'');
      t.mirror.value = value;
    };

    Editor.prototype.listenChanges = function(){
      var t = this;
      ['mouseup','touchend','keyup','blur'].map(function(event){
        t.content.body.addEventListener(event, function(){
          t.updateMirror();
        });
      });
    };

    Editor.prototype.init = function(){
      var t = this;

      t.frame = document.createElement('iframe');
      t.frame.className = prefix + '_textarea';
      t.frame.setAttribute('id','twemoji-textarea');
      t.frame.setAttribute('tabindex','-1');
      t.mirror = obj;

      t.frame.onload = function(){
        t.content = (t.frame.contentDocument || t.frame.document);
        t.content.body.setAttribute('contenteditable','true');

        t.addStyles();
        t.listenChanges();
      };
    };


    /* Descriptional Part */


    function wrap(){
      wrapper.className = prefix + '_wrap';
      box.className = prefix + '_box';
      popover.className = prefix + '_popover';
      listWrap.className = prefix + '_list_wrap';

      customTextarea = new Editor();

      list.style.height = (Emoji.length/5)*size + 'px';

      obj.parentNode.insertBefore(wrapper, obj);

      wrapper.appendChild(obj);
      wrapper.appendChild(customTextarea.frame);
      wrapper.appendChild(box);
      wrapper.appendChild(popover);
      popover.appendChild(listWrap);
      listWrap.appendChild(list);
    };


    function updateList(listSize){
      var l = Emoji.length,
          w = popover.offsetWidth,
          h = popover.offsetHeight,
          listSize = listSize || 25,
          listLength = list.children.length;

      for(var i = listLength; i<listSize; i++){
        function createItem(){
          var listItem = document.createElement('li'),
              parsedTwemoji = twemoji.parse(Emoji[i]);

          list.appendChild(listItem);
          listItem.innerHTML = parsedTwemoji;

          listItem.onclick = function(e){
              var alt = this.children[0].attributes['alt'].value;

              customTextarea.insertImage(twemoji.parse(alt));

              if(!e.ctrlKey){
                toggleBox()
              }
          }
        };

        if(Emoji[i]){
          createItem();
        }
      }

    };


     var customScroll = function(content, options){
       var wrap = document.createElement('div'),
           master = document.createElement('div'),
           slave = document.createElement('div'),
           scrollbar = document.createElement('div'),
           placeholder = document.createElement('div');

       wrap.className = 'scroll_wrap';
       master.className = 'scroll_master';
       slave.className = 'scroll_slave';
       scrollbar.className = 'scroll_bar';
       placeholder.className = 'scroll_placeholder';

       wrap.style.width = options ? options.width+'px' : '195px';
       wrap.style.height = slave.style.height = options ? options.height+'px' : '150px';
       master.style.height = options ? options.height+20+'px' : '170px';
       slave.style.width = options ? options.width +'px' : '195px';

       content.parentNode.insertBefore(wrap, content);
       wrap.appendChild(slave);
       wrap.appendChild(master);
       wrap.appendChild(scrollbar);
       slave.appendChild(content);
       master.appendChild(placeholder);

       scrollbar.style.height = (wrap.scrollHeight-30)*(wrap.scrollHeight/slave.scrollHeight)+'px';
       placeholder.style.height = (Emoji.length/5)*size+50 + 'px';//embarrassing hack

       function moveScroll(){
           var top = (wrap.scrollHeight-38)*(master.scrollTop/master.scrollHeight);
           scrollbar.style.top = top+'px';
       };

       master.onscroll = function(e){
           moveScroll();
           slave.scrollTop = master.scrollTop;
           options.onscroll(master.scrollTop);
       };

       slave.onscroll = function(){
           master.scrollTop = slave.scrollTop;
           options.onscroll(slave.scrollTop);
       };

   };

   function init(){
      var scrollList;

      wrap();
      updateList();
      customTextarea.value(twemoji.parse(obj.value));

      scrollList = new customScroll(list, {
            width: 185,
            height: 150,
            onscroll: function(scrollTop){    //Render emoji only when it needs
              var listSize = (parseInt(scrollTop/size)*5)+25;//5 rows and 5 cols = 25 items
              updateList(listSize);
            }
          });
    };



    /* Application Part */

    function toggleBox(){
      var currentClass = wrapper.className;
      if(currentClass.match('__open','g')){
        wrapper.className = currentClass.replace(/ __open/g,'')
      } else {
         wrapper.className += ' __open';
      }
    }

    box.onclick = function(e){
      e.preventDefault();
      toggleBox();
    };

    document.onclick = function(e){
      if(e.target != box && e.target != wrap && e.target != list && !e.ctrlKey){
        wrapper.className = wrapper.className.replace(/ __open/g,'');
      }
    };

    init();

    return {
      Editor: customTextarea
    };
};

$(document).ready(function(){
		var tit = new TwemojiInput(document.querySelector('textarea'));
		var messagesLength = 0;


		var input = document.querySelector('input'),
			textarea = document.querySelector('textarea'),
			disclaimer = document.querySelector('._disclaimer'),
        showMoreBtn = document.querySelector('.load_more_msgs'),
        headerLinks = document.querySelector('.links');
    
  
    input.value = window.localStorage.userName || '';
  
  
		input.onkeydown = function(){
			if(input.value.length>140){
				input.value = input.value.slice(0,140);
			}
		}

		textarea.onchange = function(){
			if(textarea.value.length>10){
				textarea.value = textarea.value.slice(0,10);
			}

		}

		document.querySelector('.post').onclick = function(){
        
			if(input.value.length>0 && input.value.length<140){
				if(textarea.value.length>0 && textarea.value.length<140){
            var data = {
              name: input.value,
              message: textarea.value,
              time: new Date().getTime()
            };
          
          window.localStorage.userName = data.name;
          
					$.ajax( { url: "https://api.mongolab.com/api/1/databases/stuff/collections/messages?apiKey=aapEtScQSyZzTIO1YMlKm3ZqmViXyAJm",
		  data: JSON.stringify( [data] ),
		  type: "POST",
		  contentType: "application/json",
		  success: function(){
		  	$('.messages').prepend(twemoji.parse('<li><h4>'+data.name+'</h4><p>'+data.message+'</p></li>'));
		  } } );
          disclaimer.innerHTML = twemoji.parse('<img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f64c.png"> Share your message to the world <img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f30d.png">');
              tit.Editor.value(' ');
              textarea.value = '';
				}  else {
					disclaimer.innerHTML = twemoji.parse('<img class="emoji" src="https://twemoji.maxcdn.com/36x36/26d4.png"> Go on, say something... It`s not that hard <img class="emoji" src="https://twemoji.maxcdn.com/36x36/2712.png"><img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f428.png">');
				}
			} else {
				disclaimer.innerHTML = twemoji.parse('<img class="emoji" src="https://twemoji.maxcdn.com/36x36/26d4.png"> What`s your name again? <img class="emoji" src="https://twemoji.maxcdn.com/36x36/1f601.png">');
			}
		}
  
		disclaimer.innerHTML = twemoji.parse(disclaimer.innerHTML);
     showMoreBtn.innerHTML = twemoji.parse(showMoreBtn.innerHTML);
     headerLinks.innerHTML = twemoji.parse(headerLinks.innerHTML);

		function getMessages(skip, append){
        showMoreBtn.disabled = true;
      
			$.ajax( { url: "https://api.mongolab.com/api/1/databases/stuff/collections/messages?apiKey=aapEtScQSyZzTIO1YMlKm3ZqmViXyAJm&s={time:-1}&sk="+skip+"&l=10",
			  type: "GET",
			  contentType: "application/json",
			  success: function(data){
            
            if(data.length < 10){
              showMoreBtn.style.display = 'none';
            }
          
			  	for(var i=data.length-1; i>-1;i--){
               if(append){
                 $('.messages').append( twemoji.parse('<li><h4>'+data[i].name+'</h4><p>'+data[i].message+'</p></li>'));
               } else {
                $('.messages').prepend( twemoji.parse('<li><h4>'+data[i].name+'</h4><p>'+data[i].message+'</p></li>'));
               }
              
               messagesLength++;
			  	}
          
          showMoreBtn.removeAttribute('disabled');
             return true;
			  }
			} );
		}
    
    showMoreBtn.onclick = function(){
      getMessages(messagesLength, true);      
    }
  
    getMessages(messagesLength);
  
  
  
		$('.content').removeClass('__wait');
		
	});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console