JS – Fdream's Blog

两个键盘事件的兼容问题

By Fdream2023-09-12Leave a Comment

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

中文输入法的回车问题

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

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

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

Chrome / Edge 结果如下：

Firefox

…

在Web Components中使用自定义字体

By Fdream2023-03-212023-03-21Leave a Comment

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

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

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

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

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

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

const FONT_FACES = `@font-face

…

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

By Fdream2023-03-182023-04-06Leave a Comment

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吗？

By Fdream2022-11-182022-11-18Leave a Comment

一看到这个刁钻问题，我竟然有点懵： (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

By Fdream2021-01-262021-01-26Leave a Comment

用了个第三方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)

…

点击显示/隐藏部分页面

By Fdream2005-10-092006-03-26Leave a Comment

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

打开状态一:

打开状态二:

网页代码如下:

…

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

By Fdream2005-05-062022-01-272 Comments

这是原来收集的代码，非原创：

<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>

…

打开页面时背景色的渐变效果（酷）

By Fdream2005-04-172011-11-07Leave a Comment

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

<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>

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

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

By Fdream2005-04-132006-03-261 Comment

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

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

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

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

…