第四章 Emoji 在Android版本上的实战演示

第四章 Emoji 在Android版本上的实战演示,第1张

1完美显示情况:

会显示,谷歌支持的Emoji不会出现信封,但是可能会被拆分开。

2低版本兼容情况:

可以做到,以及尝试很多新表情都可以显示在老版本设备上。

3是否可以判断一个完整的Emoji以及完美截断:

  解决方案有三种:

                1)根据字符长度来裁切。

                               可实现样式:单个Emoji显示没问题,组合Emoji,比如一家四口,会裁掉一个人,变成一家三口显示。

                               缺点:显示会缺失,但是不会不显示或者显示错误,举例如下:

                                               1Emoji 家庭:会显示,如果被截断会显示剩余的人数,比如一家四口,裁切掉一个后剩余3个人在一起显示

                                               2Emoji 国旗:会显示,如果被裁切会显示英文首字母大写,比如中国CH 裁切掉一个字符以后剩一个C显示出来。

               2)自研算法来裁切。通过读取字符串序列中含有EmojiUnicode,并且识别下一个节点既不是表情修饰符也不是表情连接符等,恰好也是EmojiUnicode。那么就判断此为两个Emoji的分隔。

                               可实现样式:可以达到完美裁切。

                               缺点:需要自研算法,和通过验证不同类型Emoji显示,来提升自研算法的成功比率。

               3)android提供的emoji2依赖库中,通过EmojiSpan获取到emoji的unicode起始索引和unicode结束索引,通过这个索引就可以做到类似一家三口的完美截断了。

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<script language='javascript'>

function g(obj){

var div=documentgetElementById('content');

var element=documentcreateElement('img');

elementsrc=objsrc;

//可以把的路径放到一个变量里面,然后提交到后台

//或者后台用正则表达式取也行

divappendChild(element);

divfocus();

}

</script>

<BODY>

<img src='xgif' onclick='g(this)'/>

<div id='content' contentEditable='true' style='border:1px solid blue;width:600px;height:400px'>

</div>

</BODY>

</HTML>

这样吗?

<a href="javascript:void(0);" id="f1" onclick="test(1);">^_^</a>

<a href="javascript:void(0);" id="f2" onclick="test(2);">:-P</a>

<textarea name="content" id="content"></textarea>

<script type="text/javascript">

function test(t) {

var C = documentgetElementById("content");

var F = documentgetElementById("f" + t)innerHTML;

if(F){

Cvalue = Cvalue + F

}

}

</script>

函数grin实现点击某个表情图标,就可以将表情图标翻译成代码并插入到指定的textarea中的鼠标光标停留位置。

具体实现方法:

var myField;

if () {

myField = documentgetElementById(tagname);

}else {

return false;

}

定义一个局部变量myField,并指向指定的textarea,如果不存在指定的textarea则退出。

if (documentselection) {

myFieldfocus();

sel = documentselectioncreateRange();

seltext = tag;

myFieldfocus();

}

判断是否存在documentselection对象,主要是因为浏览器之间的差异,IE支持documentselection,FF不支持,所以要先判断一下。如果存在,则:

1、焦点转到指定的textarea

2、调用selection对象的createRange方法,该方法可以返回处于激活状态的输入框中选中的文本,如果没有选中任何文本,则自动定位到光标位置,并返回空字符串。表述的可能不太准确,可以搜索一下。

3、将选定的文本替换成表情对象对应的代码,如果没有选中文本,则将表情代码插入到光标位置。

4、焦点转到textarea。

else if (myFieldselectionStart || myFieldselectionStart == '0') {

var startPos = myFieldselectionStart;

var endPos = myFieldselectionEnd;

var cursorPos = endPos;

myFieldvalue = myFieldvaluesubstring(0,startPos)

+ tag

+ myFieldvaluesubstring(endPos, myFieldvaluelength);

cursorPos += taglength;

myFieldfocus();

myFieldselectionStart = cursorPos;

myFieldselectionEnd = cursorPos;

}

如果浏览器不支持selection,则使用selectionStart和selectionEnd对象,从字面可以理解这两个对象是表示选中文本在输入框所有字符串中的起始位置和结束位置,调用subString方法以这两个位置分割输入框中的全部字符串为3个字符串,然后将选中的文本(即中间的字符串,如果没有选中文本则中间的字符串为空)替换成表情代码,最后把光标定位到表情代码的末尾,并且取消选中。

else {

myFieldvalue += tag;

myFieldfocus();

}

如果浏览器以上两种方法都不支持,则直接把表情代码添加到textarea中所有文本的末尾。

大概就是这么个意思吧。写的好累,楼主别忘了给分哦。

以上就是关于第四章 Emoji 在Android版本上的实战演示全部的内容,包括:第四章 Emoji 在Android版本上的实战演示、javascript如何在插入表情时在文本框中显示表情图片,并可以传参(java)、如何用JS 插入字符表情在textarea 谢谢等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9281549.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-26
下一篇 2023-04-26

发表评论

登录后才能评论

评论列表(0条)

保存