File size: 2.74Kb
<div class="emoji_block">
<script>
$(document).ready(() => {
$('.open_emoji_board').on('click', () => {
$('.emoji_board').toggleClass('active');
});
$(document).mouseup((e) => {
const $target = $(e.target);
if ($target.closest('.emoji_board').length === 0 && $target.closest('.open_emoji_board').length === 0) {
$('.emoji_board').removeClass('active');
}
});
$('.em_click').on('click', function() {
const been = $('#area').val();
const added = $(this).attr('data-code');
$('#area').val(been + added);
$('#area').focus();
});
});
</script>
<div class="open_emoji_board">
<i class="material-icons">mood</i>
</div>
<div class="emoji_board">
<ul>
<a class="em_click" data-code="#a01"><img src="/assets/img/emoji/001.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a02"><img src="/assets/img/emoji/002.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a03"><img src="/assets/img/emoji/003.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a04"><img src="/assets/img/emoji/004.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a05"><img src="/assets/img/emoji/005.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a06"><img src="/assets/img/emoji/006.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a07"><img src="/assets/img/emoji/007.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a08"><img src="/assets/img/emoji/008.jpg" alt="emoji"></a>
<a class="em_click" data-code="#a09"><img src="/assets/img/emoji/009.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y10"><img src="/assets/img/emoji/010.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y11"><img src="/assets/img/emoji/011.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y12"><img src="/assets/img/emoji/012.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y13"><img src="/assets/img/emoji/013.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y14"><img src="/assets/img/emoji/014.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y15"><img src="/assets/img/emoji/015.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y16"><img src="/assets/img/emoji/016.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y17"><img src="/assets/img/emoji/017.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y18"><img src="/assets/img/emoji/018.jpg" alt="emoji"></a>
<a class="em_click" data-code="#y19"><img src="/assets/img/emoji/019.jpg" alt="emoji"></a>
<a class="em_click" data-code="#z20"><img src="/assets/img/emoji/020.jpg" alt="emoji"></a>
<a class="em_click" data-code="#z21"><img src="/assets/img/emoji/021.jpg" alt="emoji"></a>
<a class="em_click" data-code="#z22"><img src="/assets/img/emoji/022.jpg" alt="emoji"></a>
</ul>
</div>
</div>