首页 > 其他分享 >CSS & JS Effect – 大杂烩

CSS & JS Effect – 大杂烩

时间:2024-12-08 19:58:33浏览次数:8  
标签:focus Effect keydown JS item input event CSS

前言

这篇记入一些小的 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。

 

标签:focus,Effect,keydown,JS,item,input,event,CSS
From: https://www.cnblogs.com/keatkeat/p/18593716

相关文章

  • Nodejs实现的社区居民互助系统的设计与实现-车位房子租赁
    《[含文档+PPT+源码等]精品Nodejs实现的社区居民互助系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利!软件开发环境及开发工具:操作系统:Wind......
  • node.js毕设网文论坛管理系统程序+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于网文论坛管理系统的研究,现有研究多集中在网络论坛的一般性管理方面,如用户管理和内容审核等常规功能的实现。专门针对网文论坛这种具有特定用户群体(......
  • 前端JavaScript(三)---JS中数组的使用
    1、JS数组创建的四种语法<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><script>/*第一种......
  • node.js毕设危化品信息管理程序+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景危化品在现代工业生产和社会生活中扮演着重要角色,但同时也带来了诸多风险,如安全事故、环境污染等。关于危化品信息管理问题的研究,现有研究主要以危化品......
  • JS如何把年月日转为时间戳
    在JavaScript中,将年月日(通常表示为一个字符串或者分别的年、月、日数字)转换为时间戳(即Unix时间戳,是自1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒)可以通过多种方式实现。以下是一些常见的方法:使用Date对象和getTime()方法如果你有一个表示年月日的字符串(例如"2023......
  • 了解JS递归
    在JavaScript中,递归是一个非常重要的概念,它允许函数在其定义内部调用自身。递归在处理许多类型的问题时非常有用,尤其是那些可以通过分解成更小、更简单的子问题来解决的问题。然而,递归也需要谨慎使用,因为它可能导致堆栈溢出(特别是当递归调用非常深时)。以下是关于JavaScript递......
  • (附源码)NodeJS宠物寄存系统-计算机毕设 31226
    NodeJS宠物寄存系统摘 要本项目旨在利用Node.js技术开发一个宠物寄存系统,解决宠物主人寄存宠物的便捷性和信息可追溯性的问题。通过该平台,宠物主人可以方便地在线预订宠物寄存,并获得相关的提醒和服务。该平台将采用数据库设计、用户认证与授权、前后端交互、寄存功能......
  • node.js毕设基于微信小程序的蔬菜市场管理系统小程序端程序+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景随着信息技术的飞速发展,传统的蔬菜市场管理面临着诸多挑战与变革需求。关于蔬菜市场管理系统的研究,现有研究主要以传统的管理模式改进为主,专门针对基于......
  • node.js毕设汽车维修服务系统程序+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于汽车维修服务系统的研究,现有研究主要以汽车维修技术、维修设备等方面为主,专门针对汽车维修服务系统整体架构和功能优化的研究较少。在国内外的汽车......
  • JSON 全面解析:从基础到实战,带你玩转前端数据交互
    文章目录前言一、什么是JSON?二、JSON的基本语法三、JSON与JavaScript的互操作四、JSON实战案例案例2:JSON字符串转换为对象案例3:数组与JSON的互操作总结前言在现代Web开发中,JSON(JavaScriptObjectNotation)已成为最流行的数据交换格式之一。......