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

效果

 

posted @   兴杰  阅读(54)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
历史上的今天:
2022-12-08 Angular 16+ 高级教程 – 谈谈 ASP.NET Core & Angular & React 在业务开发上各自的优势和体验
2022-12-08 Angular 19+ 高级教程 – 目录
2022-12-08 Angular 18+ 高级教程 – Component 组件 の Angular Component vs Web Component
点击右上角即可分享
微信分享提示