首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【译】W3C WAI-ARIA最佳实践 -- 表单

示例 单选按钮组示例使用动态tabindex 单选按钮组示例使用aria-activedescendant管理焦点 键盘交互 在单选按钮组获取焦点时: 如果有一个单选按钮被选中,那么焦点设置在这个按钮上...button-按钮 ---- 按钮 是一个组件,能够让用户触发一个操作或事件,例如提交一个表单、打开一个对话框、取消操作、或执行删除操作。告知用户一个按钮会打开对话框惯用方法是将“...”...如果按钮操作会导致上下文变更,例如,转到向导中下一步,或添加其他搜索条件,此时,可以将焦点移动到新操作起点。 如果使用快捷键激活按钮,焦点通常保留在激活快捷键上下文中。...任何其他字符输入不会更改文本字段内容和按钮值。 NOTE 操作过程中焦点仍在文本字段上。 适用于设备平台标准单行文本编辑键: 包括输入键,光标移动,选择和文本操作。...重要: 确保JavaScript不会干扰浏览器提供文本编辑功能,方法是捕获用于执行它们事件。 WAI-WRIA 角色、状态和属性 作为数值调节按钮可聚焦元素具有 spinbutton 角色。

8.2K30

文档和元素几何滚动

单选框和复选框共用一个状态标识,它们click和change事件都会被触发,相比一下change事件更加有用。 表单元素在收到键盘焦点时也会触发focus事件。...使用场景:对用户表单进行输入验证 具体后面有事件,继续写。 其过程如下 先触发onsubmit事件 → 接着调用submit()方法完成提交。...false,则不会重置 同样,如果使用表单onreset()方法也不会触发事件,将会直接进行重置。...click事件 当按钮表单元素激活时候,将会触发click事件。(即使是通过键盘而不是通过鼠标,该事件都会触发)。单选框和复选框也具有click事件。...开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态按钮。即选中或未选中。通过对其单击,用户可以改变其开关状态。

5.2K00
您找到你想要的搜索结果了吗?
是的
没有找到

Keyboard Maestro进阶-如何快速打开APP

这里我使用一款效率神器-键盘大师(Keyboard Maestro),键盘大师是一款Mac键盘增强工具,它所有功能都由Marco实现,可以将不同类型Marcos归为到一组Group,而Marco本身只是个组织形式...Trigger种类除了Hot Key,还有Typed String(输入字符)、Application(应用程序)、Login、System Wake等15种;除了使用Trigger,我们还能使用Apple...Premium、Sublime、iTerm和XMind,设置步骤如下: 一次快捷键 触发快捷菜单选项,这里一次快捷键为shift+command+option+control+L,为啥这里设置这么复杂呢...,因为我基本不使用快捷键打开应用程序快捷菜单,都是通过触摸板触发。...快捷菜单必须由快捷键触发,也就是说手必须在键盘上才能触发(这个弊端可以通过配合BetterTouchTool解决); 菜单被呼出后鼠标点击空白地方,菜单不会消失,只能通过随意按一个键或者直接点击关闭才能使菜单消失

1.6K30

VCL 控件分类_验证控件分类

(加速键是在该父菜单激活后才能使用快捷键则可以直接使用) BitMap:为菜单项加图标 右键 Insert From Template:快速使用模版创建菜单项 Frames 可用于组合多个控件,动态生成多个控件集合...OnMouseEnter:鼠标移进文本上方 OnMouseLeave:鼠标移出文本上方 OnEnter:鼠标光标进入文本 OnExit:鼠标光标离开文本 OnClick:鼠标点击文本 OnChange:每次键盘输入...可以作为某种自定义意义使用。 Columns:列表所显示栏数 MultiSelect:是否支持多选 Sorted:是否按字母顺序进行排序 ItemIndex:列表中被选中选项序号。...:还可显示图片;csOwnerDrawVariable:图片和字符串选项高度相同;csSimple:只能用户输入) Index:组合框中被选中序号 OnChange(); 在下拉列表中添加或删除字符时会触发...结合Style 为tbsCheck 使得相邻按钮为一组单选按钮。

4.3K10

原 探索Intellij Idea 201

访问工具窗体是通过使快捷键获得输入焦点(使用快捷键),所以,你可以在上下文使用所有的键盘命令,当你需要退出窗体,操作ESC按键即可 下面罗列了一些你可能常常使用快捷键: 工具窗体 快捷键 Project...当你不知道一个事件快捷键时,你可以尝试通过使用ctrl+shift+a查找事件特性。开始键入你要查找事件名字,查看这个事件或者执行它。...版本控制工具中本地变化标签展示你本地更改:阶段性和非阶段性 有用版本控制系统快捷键 事件 快捷键 版本控制工具窗体 Alt+9 弹出式VCS操作 Alt+~ 提交变动 Ctrl+K 更新项目 Ctrl...构成 默认情况下,Intellij IDEA在保存时候不会自动编译项目。如果想编译,你可以通过在主菜单选择build|make project,或者按键Ctrl+F9。...>如果你想在一个正在运行项目中提交你更改,除了使用make以外,你还可以使用ctrl+f9更新事件。但是这个事件只针对Exploded artifact类型有用。

93330

原 Intellij idea2017编辑

当然这里还有很多诸如宏指令,高亮TODO,代码分析、事件、快捷智能导航高级特性。可以使用setting中editor配置编辑器环境。也可以通过ctrl+~方式选择更改样式、主题、快捷键等。...可以使用setting|editor|apperance或者 Editor Gutter Popup Menu ? 默认情况下,此事件没有绑定快捷键,你可以在快捷键中设置自己。...以下几种情况都会触发记录历史操作: 按键 enter 光标位置发生变化 使用导航快捷键 复制、粘贴 按键 tab idea扩展撤销和重做机制已完成复杂操作。比如:格式化和重构代码,创建和删除文件。...退出 按键esc即可退出此模式(所有) 按键alt+shift,然后左键再次选择你选过位置即可退出(单个) 克隆 Ctrl+Shift+A,输入Clone caret,在列表选择你要事件 ?...使用鼠标改变字体 进入编辑器 2.按住ctrl 滚动鼠标滚轮即可 使用键盘改变字体 1.按ctrl+shift+a 2.在对话框中输入Increase font size 或者 Decrease font

2.8K60

Adobe国际认证教程指南|Premiere Pro 中键盘快捷键

当您更改快捷键时,预设弹出式菜单会更改为“自定义”。执行所需更改之后,您可以选择“另存为”,将自定义快捷键组保存为预设。颜色编码紫色阴影键是应用程序范围快捷键。绿色阴影键是特定于面板快捷键。...4.单击项目的快捷键字段,将其选中。5.键入要用于项目的快捷键。如果所选快捷键已被使用,“键盘自定义”对话框会显示一个警告。...另外,不能分配数字小键盘加号 ( + ) 和减号 (-) 键,因为它们是输入相对时间码值时需要使用键。但可以分配主键盘减号 (–) 键。...编辑快捷键要编辑快捷键,请单击快捷键列中快捷键文本。文本将替换为一个可编辑按钮。输入使用快捷键。如果您输入快捷键已在使用中,将显示一条警告。...要移除快捷键组,可从“组”菜单选择键组,然后单击“删除”。当警告对话框中出现提示时,单击“删除”以确认您选择。打印键盘快捷键许多编辑器都倾向于配备键盘快捷键文档,便于用户搜索和参考。

2.3K40

JavaScript 编程精解 中文第三版 十八、HTTP 和表单

本书不会全面的讨论每一个输入字段类型,不过我们会先大概讲述一下。 很多字段类型都使用标签。标签type属性用来选择字段种类,下面是一些常用类型。...聚焦 不同于 HTML 文档中其他元素,表单字段可以获取键盘焦点。当点击或以某种方式激活时,他们会成为激活元素,并接受键盘输入。 因此,只有获得焦点时,你才能输入文本字段。...其他字段对键盘事件响应不同。 例如,菜单尝试移动到包含用户输入文本选项,并通过向上和向下移动其选项来响应箭头键。...change事件不会在每次有输入时都被调用,而是在内容在改变并失焦后触发。为了及时响应文本字段改变,则需要为input事件注册一个处理器,每当用户有输入更改时就被触发。...内容改变时会触发change事件,文本有输入时会触发input事件键盘获得焦点时触发键盘事件

3.8K20

全栈开发工程师微信小程序-上(下)

bindsubmit 携带 form 中数据触发 submit 事件 bindreset 表单重置时会触发 reset 事件 Page({ formSubmit(e) {...text 文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点数字键盘 confirm-type 有效值: send 右下角按钮为“发送” search 搜索...效果 label 用来扩展目标组件可单击区域. 使用for属性找到对应id,单击label区域,会触发对应控件. 将目标组件作为子标签直接放在label组件内部....for优先级高于内部控件,内部有多个控件时候默认触发第一个控件,用来改进表单组件可用性,使用for属性找到对应id....对于checkbox组件本身没有文本,就要借助label组件进行扩展,然后就可单击区域,如果没有checkbox放在label标签内部,那么单击时,就不会选中. radio同样没有默认标签文本,所以可用

1.4K40

软件测试|超好用超简单Python GUI库——tkinter(十六)

注意,此选项并不会自动将快捷键与菜单项连接在一起,必须通过按键绑定来实现command选择菜单项时执行 callback 函数label定义菜单项内文字menu此属性与 add_cascade()...方法一起使用,用来新增菜单项子菜单项selectcolor指定当菜单项显示为单选按钮或多选按钮时选择中标志颜色state定义菜单项状态,可以是 normal、active 或 disabledonvalue...通过将该值与 variable 选项值对比,即可判断用户选中了哪个按钮variable当菜单项是单选按钮或多选按钮时,与之关联变量示例下面我们通过几个示例来介绍上述属性以及方法使用:创建主目录菜单主目录菜单也称之为...menu参数与下拉菜单绑定mainmenu.add_cascade (label="球员",menu=filemenu)# 将主菜单设置在窗口上win.config (menu=mainmenu)# 绑定键盘事件...,按下键盘相应键时都会触发执行函数win.bind ("",menuCommand)win. bind ("", menuCommand)win.bind

85730

前端基础(HTML,CSS,JavaScript)知识笔记,附:前端基础面试题!!

,当元素失去焦点时触发 onchange,在元素值被改变时触发 onfocus,当元素获得焦点时触发 onreset,当表单中重置按钮被点击时触发 onselect,在元素中文本被选中触发...onsubmit,在提交表单时触发 keyboard 键盘事件: onkeydown,在用户按下按键时触发 onkeypress,在用户按下按键后,按着按键时触发。...(该属性不会对所有按键生效,不生效有:alt,ctrl,shift,esc) mouse 鼠标事件: onclick,当在元素上发生鼠标点击时触发 onblclick,当在元素上发生鼠标双击时触发...text 单行文本输入框 password 密码输入框(密码显示为***) radio 单选框 (checked属性用于显示选中状态) checkbox 复选框(checked属性用于显示选中状态) file...上传文件 button 普通按钮 reset 重置按钮(点击按钮,会触发form表单reset事件) submit 提交按钮(点击按钮,会吃饭form表单submit事件) email 专门用于输入

2.3K20

手机端收入实时监听oninput & onpropertychang

手机端输入,还是pc端思维,……然后输入,毛反应……使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦...oninput 事件在主流浏览器兼容情况如下:oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发...时,却不会触发;onpropertychange事件是任何属性改变都会触发,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange...(此处都是指在js中动态绑定事件,以实现内容与行为分离)oninput与onpropertychange失效情况:(1)oninput事件:a). 当脚本中改变value时,不会触发;b)....从浏览器自动下拉提示中选取时,不会触发。(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发

82710

Vue快速入门(二)

: 检测不到变动数组操作: 解决方法: 数据双向绑定 事件处理 过滤案例 事件修饰符 按键修饰符 表单控制 checkbox单选 checkbox多选 radio单选 总结 v-model进阶 v-model...事件 释义 input 当输入框进行输入时候 触发事件 change 当元素值发生改变时 触发事件 blur 当输入框失去焦点时候 触发事件 change 和 blur...最本质区别: 如果输入框为空,失去焦点后,change不会触发,但是blur会触发 过滤案例 <!...,光标移走不会触发区别blur 注意: this指向问题,如果想要this指向对象始终是一个对象,比如始终指向Vue对象,可以通过 var _this=this来指代,或者使用箭头函数 var a...阻止a链接跳转 .once 事件只会触发一次(适用于抽奖页面) 使用修饰符时,顺序很重要;相应代码会以同样顺序产生 用 v-on:click.prevent.self 会阻止所有的点击

3K20

HTML 表单和约束验证完整指南

媒体捕捉输入法 checked 复选框/收音机被选中 disabled 禁用控件(它不会被验证或提交其值) form 与使用此 ID 表单关联 formaction 提交和图像按钮上提交 URL...:indeterminate 不确定复选框或单选状态,例如取消选中所有单选按钮时 :default 默认提交按钮或图像 您可以placeholder使用::placeholder伪元素设置输入文本样式...(不同之处在于checkValidity()检查是否有任何输入受约束验证。) Mozilla 文档解释说: invalid每个无效字段也会触发一个事件。...这不会冒泡:必须将处理程序添加到使用每个控件中。...checkValidity():true当输入有效时返回。该valitity.valid属性执行相同操作,但checkValidity()还会invalid在该字段上触发一个可能有用事件

8.2K40

Android Studio快捷键每日一练(4)

也就是说,你可以一次性在多个位置输入相同内容。(注:要先选中一个字符串才可以哦) ?...简单说,当你向下选择时,不会将行尾内容也选进来。只会将你选中矩形区域作为选择结果,并在矩形区域最后加上光标让你编辑。 ? 36、后缀补全 快捷键:无 这个特性从字面上来看可能不太好理解。...40、显示VCS操作列表框 苹果:Ctrl+V    Windows:Alt+`(键盘上ESC键下面的那个键) 该快捷键将给你提供一个常用版本控制操作列表。...如果你工程并没有使用版本控制系统,那么会显示一个由Android Studio维护本地修改历史。 ?...41、分支比较(git) 快捷键:菜单选择VCS->Git->Compare With Branch.

1K80

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

前言  是否曾经被业务提出"能改改这个单选颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。...,若通过鼠标点击虽然单选框已获得焦点,但上述样式并不会生效。...1.3.设置为disabled样式 color: rgb(84, 84, 84); 2.行为特征  单选行为特征,明显就是选中与否,及选中状态改变事件,因此我们必须保持对外提供change事件...另外值得注意是,当通过键盘Tab键让单选框获得焦点后,再按下Space键则会选中单选框。  有了上述了解,我们可以开始着手撸代码了! 少废话,撸代码 ?...但由于label控件自身限制,如默认不是可获得焦点元素,因此无法传递键盘按键事件单选框,即使添加tabindex特性也需手写JS来实现; 当tabindex大于等于0时表示该元素可以获得焦点,为0时表示根据元素所在位置安排获得焦点顺序

2.7K30
领券