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; }
效果
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 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