前端常见bug系列3:<input type="text">中emoji表情与文字并存时表情被截掉一部分-阿里云开发者社区

开发者社区> pai_an> 正文

前端常见bug系列3:<input type="text">中emoji表情与文字并存时表情被截掉一部分

简介: 比如,有这个一个demo页面: ``` Title .text-input{ font-size: 1.2rem; line-height: 1.2rem; height: 1.2rem; border: 1p
+关注继续查看

比如,有这个一个demo页面:

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        .text-input{
            font-size: 1.2rem;
            line-height: 1.2rem;
            height: 1.2rem;
            border: 1px solid #eee;
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
    <h2>input type="text"中输入emoji表情时表情被截掉一部分的bug</h2>
    <input class="text-input" type="text" name="comment">
</body>
</html>

当你在手机上(比如iPhone 5S)浏览这个页面,并在页面的输入框中输入一些中文内容的同时再输入几个emoji表情的时候, 会发现emoji表情无法完整显示,看起来就像有一部分被裁切掉了。

问题发现了,处理起来就比较简单了——加大行高, 比如, 加大到1.5rem。这个问题不难, 之所以收录进来,是因为自测的时候,很容易忘记对emoji表情这种特殊的输入进行测试验证,从而最终导致bug的存在。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Fundebug前端JavaScript插件更新至1.7.1,拆分录屏代码,还原部分Script error.
摘要: BUG监控插件压缩至18K。 1.7.0拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug。请大家及时更新哈~ 拆分录屏代码 从1.7.0版本开始,我们拆分了录屏代码。
1342 0
input输入框只允许中文汉字、数字、整数等
只允许输入数字   使用JS限制input输入框只允许中文汉字、数字、整数等效果,多款代码,希望对各位有所帮助,多多关注烈火网。 其一,只允许输入数字和小数点。 其二,判断的更详细一些,甚至22..2这样不算数字也判断得出来 function check(){ if (isNaN(tt.value)) {alert("非法字符!"); tt.value="";} } 其三,只允许输入整数。
744 0
强化学习在生成对抗网络文本生成中扮演的角色(Role of RL in Text Generation by GAN)(上)
强化学习(Reinforcement Learning,RL)由于其前卫的学习方式,本不如监督学习那么方便被全自动化地实现,并且在很多现实应用中学习周期太长,一直没有成为万众瞩目的焦点,直到围棋狗的出现,才吸引了众多人的眼球。
1500 0
前端常见bug系列2::last-of-type 和 :first-of-type的误用
[上一篇](http://www.atatech.org/articles/64244)中曾提到,someselecttor:last-chid 所表示的并不是someselecttor选中的节点集合的最后一个。那么,怎么达到这个效果呢?对,可以用:last-of-type。来个例子试试看吧! ``` .section{ margin-bot
4143 0
Android常见输入inputType类型
android:inputType="none"//输入普通字符 android:inputType="text"//输入普通字符 android:inputType="textCapCharact...
1102 0
orm2 中文文档 4.3 extendsTo(一对一关系)
译者:飞龙 来源:extendsTo 你可能想把可选的属性分割到另一个表中。每个扩展都会是一个新的表,其中每一行的唯一标识符是主模型实例的id。
599 0
+关注
pai_an
拍岸,前端,现就职于阿里巴巴
12
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载