看不到但摸得到的捣蛋鬼---Zero Width Space

2019-12-04 admin

1.情况如何?

昨天,“某某某”的代码出现了一个bug。大概是这个情况: 有一个提示信息,需要展示,大概这样:

这行文字,在谷歌上一点问题都没有,但是在ie上出现了奇怪的框框。比如这样:

ie浏览器真的是代码检查器啊,稍微一个不注意,就搞事情~~~

2.so why?

经过我的多次实验、摆弄,发现一件事,我在双引号和label之间按下退格键、方向键,会发现,总是多出来一次操作,方向键、退格键总是需要多按一次,才可以删除前双引号。很奇怪很奇怪。

于是,我百度“听大悲咒时应该保持什么心情”、“天台上怎么样不会太冷”。。。 功夫不负有心人,我找到了这个关键词-----Zero Width Space。

百度了一下:

3.这是个什么东西呢?

Zero-width space的Unicode编码为U+FEFF,二进制编码为“xE2x80x8E”,根据维基百科描述,其主要用于后台处理字符边界而又无需可见空格的情况。

简言之:具有空格的功能,但宽度为零。

为了搞清,我这个小东西的unicode的编码是什么,我在这个链接下

http://tool.chinaz.com/tools/…

把我的那个符号考进去,点击中文转unicode,然后就这样:

备注:这种符号可能有很多,大家可以在探索其他的相似符号.

4.代码搞一搞

我敲了一段代码:

<input type="text" id="have10" />
<input type="text" id="have20" />
<script>
    var uniCodeStr = "\u0008";
    var str = eval("'"+uniCodeStr + "'")
    var have10 = "10";
    var have20 = "20";
    for(var i = 0;i < 10 ; i++ ){
        have10 += str;
    }
    for(var i = 0;i < 20 ; i++ ){
        have20 += str;
    }
    document.getElementById('have10').value = have10;
    document.getElementById('have20').value = have20;
</script>

ie上大概这样

谷歌上这样:

大家可以试一试,需要按10次退格键,才可以删到10的位置;需要按20次退格键,才可以删到20的位置。

是不是有一点恐怖?

看不到,但是又实实在在的存在。

5.危险

有这么几个场景,大家想象一下:

  1. 有人发了一个text文档,里面只有两个字母,但是接收时却卡死了电脑;
  2. qq上陌生人发来了两个字,手机却重启了;
  3. 数据库查询的时候,字段、sql看起来都对,但是却查不出想要的结果;
  4. url写的没问题,但是总是404~

6.解决

这个的话,百度搜索吧,方法也有很多,我就不赘述了

最后

你好!我是 JHCan333,公众号:爱生活的前端狗 的作者。公众号专注 前端工程师 方向,包括但不限于技术提高、职业规划、生活品质、个人理财等方面,会持续发布优质文章,从各个方面提升前端开发的幸福感。关注公众号,我们一起向前走!

[转载]原文链接:https://segmentfault.com/a/1190000021187258

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80376.html

文章标题:看不到但摸得到的捣蛋鬼---Zero Width Space

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部