前端常见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的存在。

目录
相关文章
|
7月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
248 0
|
2月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
1月前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
85 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
69 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
296 0
|
7月前
|
前端开发
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长
243 0
|
6月前
|
前端开发 安全 JavaScript
如何区分是前端BUG还是后端BUG
1 基于经验 前端BUG特点: (1)界面排版、布局错误、兼容性问题 (2)网络不稳定导致JS或CSS未完全加载或请求超时(一般不需要提BUG),正常网络下加载超时 后端BUG特点: 业务逻辑、性能问题、数据问题、安全性问题 2 通过HTTP请求和响应信息 可以通过浏览器开发者工具(F12)、postman、fiddler(移动端可通过该工具抓包)、Charles、Proxyman、Wireshark、HttpCanary、tcpdump等工具。
102 1
|
5月前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
237 0
|
5月前
|
前端开发 JavaScript 流计算
前端 JS 经典:打印对象的 bug
前端 JS 经典:打印对象的 bug
46 0
|
7月前
|
人工智能 前端开发 JavaScript
前端:魅力与技术并存的艺术
前端:魅力与技术并存的艺术
49 3