两个键盘事件的兼容问题

最近碰到两个键盘事件的问题,以前一直没怎么注意。

中文输入法的回车问题

很多输入框都支持Enter回车键提交,但是在中文输入法下,用回车输入英文的时候会直接触发Enter提交行为。此时可以使用KeyboardEventisComposing属性可以判断当前是否是处于输入过程中,即是否在compositionstartcompositionend之间,如果isComposingtrue,忽略此时的Enter即可。在FirefoxChrome中都无此问题,但是在Safari下,此时的isComposing会为false,无法正常处理此时的Enter

迫于无奈,只好看下Event中是否还有其他属性可以使用,试试keycode和被抛弃的keyCode

console.log(e.key, e.code, e.keyCode, e.isComposing)

Chrome / Edge 结果如下:

Firefox

在Web Components中使用自定义字体

自定义字体是个好东西啊,FontAwesome/Remixicon等优秀的图标都是用自定义字体来实现的,非常省事好用。如此让人上瘾的东西,可惜碰到了web components之后麻烦就来了。

首先,web components是自隔离的,父页面中的样式是不能作用于组件的,所以按照常规方法是把样式嵌入到组件中。非常遗憾的是,css加载是没问题的,但是它并没有于我们预期想象的一样把图标显示出来。

这个看起来就像是字体缺失,打开网路请求检查一下,的确就是没有字体请求!但是,令人意外的是,如果在父页面中引入自定义字体,在组件内部使用自定义字体,居然是行得通的!

所以这个丑陋的方案就出来了,把他们拆成两个部分:

  1. 字体定义部分放在父页面中,通过父页面来请求自定义字体;
  2. 样式部分放在web components中,因为样式是隔离的。

当然,我们可以通过js来在父页面中注入自定义字体:

const FONT_FACES = `@font-face

在React中分离Shadow DOM样式及使用Sass

Shadow DOM已经比较成熟了,基本上所有的现代浏览器都已经支持了,可以参考Can I Use。在React中使用shadow DOM也不是什么新鲜事,也有一些关于shadow DOM的第三方库,但是在CSS方面,几乎都是使用了styled components的方式。我个人不太喜欢这种css和js混在一起方式,而且这种方式下也没法使用scss了。

开始看了下style-laoder的文档,里面有个选项insert,可以传入一个function,这样你可以在里面进行你想要的操作,比如找到shadow DOM的shadow root,然后把你的style插入进去:

rules: [
  // Other webpack modules
  ...
  {
    test: /\.css$/,
    use: [
      {
        loader: require.resolve('style-loader'),
        options: {
          insertInto: function

看到一个刁钻问题: (a==1 && a==2 && a==3) 可以为true吗?

一看到这个刁钻问题,我竟然有点懵: (a==1 && a==2 && a==3) 是否可以为true?既然能提出这个问题,说明那肯定是可以为true的,那么怎么样实现呢?

在js里面,比较运算符对于不同类型的值会做类型转换,所以这里应该有可以操作的可能。我们先看一下非严格相等在js里面的类型转换关系:

被比较值 B
Undefined Null Number String Boolean Object
被比较值 A Undefined true true false false false IsFalsy(B)
Null true true false false false IsFalsy(B)
Number false false A === B A === ToNumber(B) A=== ToNumber(B) A== ToPrimitive(B)
String false false ToNumber(A) === B A ===

rollup打包处理注释的一个奇怪bug

用了个第三方zip压缩库,正常html用标签方式引入没有问题,用npm引入后发现不支持import,于是跑去github上翻了下issue,结果作者认为import不是正式标准,不打算支持,甚至有人push了修改后的代码,仍然被拒了,原因是破坏了原有的require路径。

这个也好办,把dist下的代码复制过来,加个export default就行了。结果发现下在打包时出现了奇怪的语法错误“SyntaxError: Unexpected token”,通过大段删代码的方式总算定位到一个注释的问题:

const _tr_tally = (s, dist, lc) =>
//    deflate_state *s;
//    unsigned dist;  /* distance of matched string */
//    unsigned lc;    /* match length-MIN_MATCH or unmatched char (if dist==0) 

用Javascript读写Cookie

写在前面:这篇文章出来的晚了,还请大家原谅!主要原因是今天放学后,被人拉去Happy了^_^,也祝大家周末快乐!

接上回:
要让浏览器记住用户选择的样式文件,最简单的方法就是使用cookie了,而且用Javascript设置和读取也很方便。

//设置Cookie的函数

function SetCookie(name,value){
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(2 var path=(3 var domain=(4 var secure=(5 document.cookie=name+”=”+escape(value)+((expires==null)?””:(“; expires=”+expires.toGMTString()))+((path==null)?””:(“;

点击显示/隐藏部分页面

看看效果先:
默认关闭状态:

打开状态一:

打开状态二:

网页代码如下:

在网页中实现不间断滚动的文本

这是原来收集的代码,非原创:

<div style="width: 200px; height: 150px; overflow: hidden;"><script language="javascript">
document.write(news.tBodies[0].innerHTML);
</script>
<table id="news" style="position: relative; top: 0px; width: 200px; table-layout: fixed;" cellspacing="0" cellpadding="5" bgcolor="#F8F8F8">
<tbody>
<tr>
<td valign="top" height="150"><b>新闻一</b>
<p> </p>
<p>新闻内容</p>

打开页面时背景色的渐变效果(酷)

这种效果还比较酷的说,不过打开的时候有点慢(如果你打开的窗口很大的话)。

<script type="text/javascript">

function BgColor(){
    var x = 0, step = 1;
    while( x <= 0xffffff){
        document.bgColor = x;
        x += step;
        step <<= 8;
        if( step >= 0x1000000) step = 1;
    }
}

BgColor()
// ]]>
</script>

打开页面时背景色的渐变效果…

网页自适应不同分辨率显示

尽管现在显示器的主流是17英寸的,但不少用户仍然使用的是15英寸的显示器。我们在用一张图片做首页时,为了能使页面在不同的分辨率下都能完美的显示出来,就需要考虑网页能否根据不同的分辨率自动显示相应的页面。

这里有一种比较简单的方法,可以轻松解决上述问题:

首先准备好要在两个不同分辨率下分别显示的文件,这里假设为 index1.html 和 index2.html;

其次在你的首页文件 index.html 或者 index.htm的页面代码中的和中加入以下代码: