在文本区域的底部显示emojionearea emoji容器

时间:2018-08-17 11:28:02

标签: javascript jquery emojione

我只是将emojionearea.js应用到了我的文本区域,但是表情符号显示在我的文本区域的顶部,对用户隐藏了它的视图。

enter image description here

我想知道如何将其容器放置在我的文本区域的底部。

我的代码:

    $(document).ready(function() {
        			$(".emoji_act").emojioneArea({
        				emojiPlaceholder: ":smile_cat:",
        				searchPlaceholder: "Search",
        				buttonTitle: "Use your TAB key to insert emoji faster",
        				searchPosition: "bottom",
        			});
    			});
<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet"/>
    		<div class="container-fluid pt-3">
    			<form method="POST" action="" enctype="multipart/form-data">
    				<div class="form-group">
    					<font color="#a1a1a1"><span id="count"></span> characters remaining</font>
    					<textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
    					<span id="bio_val"></span>
    				</div>
    				<div class="form-group">
    					<button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
    						Done
    					</button>
    				</div>
    			</form>
    		</div>	
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    		<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>

1 个答案:

答案 0 :(得分:2)

为了学习如何使用此js库,请遵循this document

现在让我们解决您当前的问题:

您可以在传递给if [field] =~ /t\.co.*/ jquery函数的初始配置中将属性pickerPosition设置为bottom

emojioneArea
$(document).ready(function() {
  $(".emoji_act").emojioneArea({
    emojiPlaceholder: ":smile_cat:",
    searchPlaceholder: "Search",
    buttonTitle: "Use your TAB key to insert emoji faster",
    searchPosition: "bottom",
    pickerPosition: "bottom"
  });
});