CSS & JS Effect – 大杂烩

前言

这篇记入一些小的 CSS & JS Effect。

 

Transfer div keydown to input

一个 filterable selection list。

user 点击 input > 输入 text > 接着选择 item。

此时 input 就 blur 了。

如果此时 user 想继续输入 text 或者 arrow up/down 怎么办呢？

我们可以这样做，当 user 点击 item，item list (tabindex -1) 被 focus，接着监听 keydown，然后 transfer keydown event to input。

HTML

<input>
<div class="item-list" tabindex="-1">click item</div>

Scripts

const input = document.querySelector('input')!;
const itemList = document.querySelector<HTMLElement>('.item-list')!;

itemList.addEventListener('keydown', event => {
  // keydown 后立马 focus 到 input
  input.focus();

  // 给 input 发布 keydown 事件
  // 注：必须要 new 新的 KeyboardEvent 哦，不可以直接传入 event，因为一个 event 只能被 dispatch 一次
  input.dispatchEvent(new KeyboardEvent('keydown', event));
});

input.addEventListener('keydown', () => {
  console.log('input on keydown');
});
input.addEventListener('input', () => {
  console.log('input on input');
});

效果

keydown 后 focus to input，它就会输入 text 和触发 input 事件了。

但不会触发 input 的 keydown 事件，所以我们需要手动 input.dispatchEvent。

 

Browser scroll to #id 配上 'scroll-margin'

默认情况下，browser scroll to #id 是完全不留空隙的，这个体验不是很好，总要有留点空间呼吸嘛。

这时，我们就可以给这个 #id element 加上一个 scroll-margin，意思是如果 scroll to 这个 #id element，它会留一个 margin top 空间。

[id] {
  scroll-margin-top: 64px;
}

效果

这招也可以用在 input valid 的时候，但是 textarea 用不了，相关 issue，我猜是因为 textarea 的 scroll 体验和 input 不太一样。

textarea 如果很高，focus scroll to 它会在 screen 中间，这和 input always on top 不同。