实现按住shift键多行操作选框 (谷歌历史记录中的选框效果)

最新推荐文章于 2022-04-12 16:27:51 发布
最新推荐文章于 2022-04-12 16:27:51 发布
阅读量627 收藏 1
点赞数 2
分类专栏： js 文章标签： html5 html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jingwen_molo/article/details/120423756
版权
本文介绍了如何实现类似谷歌历史记录页面的多行选框操作，即点击一个选框，按住Shift键再点击其他选框，会选中或取消选中它们之间的所有选框。实现思路包括在按下Shift键时检查之前是否有过点击，保持所有选框状态与最后点击的选框状态一致，并使用indexOf方法处理中间选框。提供了详细的代码注释，包含HTML、CSS和JS部分。
摘要由CSDN通过智能技术生成

本文实现的效果为谷歌-历史记录页面中的checkbox选框效果, 效果描述如下:

        点击一个选框,按住shift再点击其他选框,其中间的所有选框都被选中 / 取消选中

 本文中的css与html框架来源于github, js部分为自己编写.

实现思路:

       1.  在按下shift键, 且再此之前点击过其他的input选框时, 即可多行操作选框.

        2. 所有选框的状态与最后一次点击的选框状态相同  

        3.我们需要获取整个过程中首次点击的input元素, 与最后一次点击的input元素, 并利用数组的indexOf方法操作它们中间的元素.

代码如下: (详细注释)

为了大家能清楚代码结构,我把html与css代码也上传了

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Hold Shift to Check Multiple Checkboxes</title>
	</head>
	<body>
		<style>
			html {
				font-family: sans-serif;
				background:
最低0.47元/天 解锁文章
「已注销」
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带快捷键的批量操作（按下shift键批量改变复选框的值）
qq_41595903的博客
02-25 1122
&amp;lt;template&amp;gt; &amp;lt;ul class=&quot;checkbox-wrapper&quot;&amp;gt; &amp;lt;li :class=&quot;{'false-msg': !item}&quot; v-for=&quot;(item, i) in data&quot; :key=&quot;i&quot;&amp;gt;
10 - JS 实现 Checkbox 中按住 Shift 的多选功能.rar
05-01
这个主题，"10 - JS 实现 Checkbox 中按住 Shift 的多选功能"，聚焦于通过按下Shift键实现连续选择多个Checkbox的功能，这在各种用户界面中非常常见，比如文件管理器、表格数据筛选等。 实现这一功能的关键步骤包括...
PowerBuilder用Ctrl和Shift键实现鼠标多选数据行
雾雨风逝
02-27 2498
功能实现：配合ctrl和shift键，实现用鼠标多选数据窗口的行，类似window的多选文件或文件夹// 实例变量 //Long il_row_first = 0   ///--- Instance Variables// dw的clicked（）事件Long  ll_posIf row = 0 Then ReturnIf keydown(KeyControl!) Then     // Ctrl + Clicked il_row_first = row If IsSelected(row) Then  T
VUE + Element-ui 按住Shift实现多选
weixin_54848668的博客
04-12 2172
1.效果图 2.首先，我们要在Element table组件中写一个事件@select = "pinSelect" 这里添加Element组件 table的触发事件@select = "pinSelect"，pinSelect是自定义命名的。 3.在data中添加两个变量，自定义命名 origin: -1是起点数，pin:false是默认不按住 4.在 mounted()写键盘事件，keydown按住和keyup松开事件 5. 在updated()遍历数据数组，...
点击单选，shift多选
qiqi学习园地
03-24 1228
// vue版本 // 效果： 任意点击高亮，再次点击取消高亮 如果在点击前按住了shift按键，会将你当前点击的 到他前面 离他最近的高亮的之间的都高亮![在这里插入图片描述](https://img-blog.csdnimg.cn/20190324200728706.png) <!DOCTYPE html> <html lang="en"> <h...
vue ctrl、shift 键实现多选功能
weixin_40079913的博客
06-25 1388
<div> <div v-for="(item, index) in listData" :key="item.id" :class="item.selected ? 'is-actived-box' : ''" @click="handleItem(item, index)">{{ item.label }}</div> </div> keyevent () { var that =this; // 按下键盘 document.onkey
扩展DataView实现（MultiSelect）多行选择框
mustar的专栏
09-01 1605
 Ext中有一个Combox组件，但缺少了多行选择框，也就是普通html中size大于0的select选择框。在网上看到有很多朋友都需要这个组件，今日无聊，于是就简单的扩展了一个，共享给大家。同时再赞ext的强大！目前支持如下功能：1、键盘上下箭头导航。2、键盘上下箭头选择某项保证该项可见（自动滚动滚动条以保证显示）。3、初始化默认选中第一条记录。4、通过ctrl或shift实现多项选择。（这个是
Element中Tree树结构组件中实现Ctrl和Shift多选.doc
07-10
Element 中 Tree 树结构组件中实现 Ctrl 和 Shift 多选 在 Element 中的树结构中，实现多选功能是一件复杂的事情。首先，我们需要判断用户是否按下了 Ctrl 和 Shift 键，然后根据不同的情况进行处理。在 Element 中...
js判断是否按下了Shift键的方法
10-24
主要介绍了js判断是否按下了Shift键的方法,主要通过event.shiftKey方法来判断,需要的朋友可以参考下
WPS的shift键.docx
02-07
熟练掌握这些`Shift`键的组合使用，可以在WPS Office中实现更高效的操作。对于经常使用WPS或Word的朋友来说，了解并习惯这些快捷键能够显著提升工作和学习的效率。通过实践和记忆，你会发现这些技巧将成为你日常编辑...
shift按住后实现连续选择
10-11
实现全选，反选，按住shift键实现多项连续选择
JavaScript通过Ctrl和Shift键的实现多选
03-13
1. 按Ctrl 选中不连续的 2. 按shift 选中连续的
JavaScript实现按Ctrl键打开新页面
10-25
主要介绍了JavaScript实现按Ctrl键打开新页面的例子,本文方法适用HTML5环境中,需要的朋友可以参考下
jQuery实现shift键的行多选，checkbox连续多选，反选
Rudon滨海渔村的博客
02-28 1025
步骤 下载jquery.shiftcheckbox.js -https://download.csdn.net/download/qq285744011/12199311 在页面中引用jq + 上述js，写好各个checkbox如：<input type="checkbox" class="multi-checkbox" value="c1"/> JS调用： $(d...
用js实现shift+单击来选择多项
热门推荐
凌晨1点21分的专栏
09-29 1万+
由于工作需要，在web项目的几个批量处理功能中使用js来实现shift+点击左键选择连续的多项，通过查阅了下网上资源，挑了一种简单的实现方式，这里做个简单的记录和共享。          主要参考的资源：http://blog.sina.com.cn/s/blog_94eb1a960100zl7z.html          主要涉及到的技术：html    javascript    jqu
chrome历史记录,浏览记录,全选问题.
weixin_30692143的博客
08-22 1173
一句话, 这个列表支持SHIFT多选 =,=! 转载于:https://www.cnblogs.com/SilenceRet/p/9515329.html
按住shift键实现多选
Bambi12的博客
08-01 1942
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ::selection { backgrou
06-Shift键实现复选框多选
Strawberry_ahh的博客
06-14 866
1、界面设置 2、代码实现 //判断shift键操作 bool isShiftDown = false; private void Form1_KeyUp(object sender, KeyEventArgs e) { if (e.KeyCode == Keys.ShiftKey) { isShiftDown = false; }
谷歌浏览器实现按下按键的脚本_谷歌浏览器快捷键设置方法详解
weixin_39643679的博客
01-12 1884
谷歌浏览器快捷键设置方法详解谷歌浏览器中的快捷键默认是无法修改的，如果想要修改还需要我们下载一个插件才可以。接下来小编将谷歌浏览器修改快捷键的方法分享给大家。谷歌浏览器快捷键设置方法：1、首先我们在谷歌浏览器右上角的菜单中找到“扩展程序”并打开，如下图所示：2、接着在扩展程序中打开“获取更多扩展程序”；3、之后在弹出的页面搜索框中搜索“Keyconfig”并添加；4、安装完毕后在扩展程序中找到该程...
vue3+ts中如何实现按住shift按键选中多条数据。写一段代码
最新发布
07-13
在Vue 3 + TypeScript中，你可以使用事件监听和状态管理来实现按住Shift键选中多条数据的功能。以下是一个简单的示例代码： ```html <template> <div> <div> <!-- 绑定 shift 键的按下和抬起事件 --> <div @keydown.shift="handleShiftKeyDown" @keyup.shift="handleShiftKeyUp"> <div v-for="item in items" :key="item.id" :class="{ selected: item.selected }"> {{ item.name }} </div> </div> </div> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; export default defineComponent({ data() { return { items: [ { id: 1, name: 'Item 1', selected: false }, { id: 2, name: 'Item 2', selected: false }, { id: 3, name: 'Item 3', selected: false }, // 添加更多条目... ], lastSelectedIndex: -1, }; }, methods: { handleShiftKeyDown(event: KeyboardEvent) { // 按下 Shift 键时，将 lastSelectedIndex 设置为当前选中的条目索引 const selectedItem = this.items.find(item => item.selected); this.lastSelectedIndex = selectedItem ? this.items.indexOf(selectedItem) : -1; }, handleShiftKeyUp(event: KeyboardEvent) { // 抬起 Shift 键时，根据 lastSelectedIndex 和当前选中的条目索引，选中范围内的条目 const selectedIndex = this.items.findIndex(item => item.selected); if (selectedIndex !== -1 && this.lastSelectedIndex !== -1) { const start = Math.min(selectedIndex, this.lastSelectedIndex); const end = Math.max(selectedIndex, this.lastSelectedIndex); for (let i = start; i <= end; i++) { this.items[i].selected = true; } } }, }, }); </script> <style scoped> .selected { background-color: yellow; } </style> ``` 在上面的示例中，我们使用了`@keydown.shift`和`@keyup.shift`来监听Shift键的按下和抬起事件。当Shift键按下时，我们记录下当前选中的条目索引为`lastSelectedIndex`。当Shift键抬起时，根据`lastSelectedIndex`和当前选中的条目索引，选中范围内的条目。 注意：在示例代码中，我们使用了Vue 3的Composition API中的`defineComponent`和`reactive`函数，以及TypeScript的类型注解来定义组件和方法的类型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值