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

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

使用 link 角色,为元素提供这些特性是开发者的责任。 示例 链接举例: 用HTML标签 span 和 div 构建链接部件。 键盘交互 Enter: 执行链接并且将焦点移动到链接目标。...+ Enter: - 焦点位于一个具有子菜单的 menuitem 上,打开子菜单并将焦点放在其子菜单的第一个项目上。 - 否则,激活该项目并关闭菜单。...,关闭其 menu 和所有打开的父级 menu 容器 + Shift + Tab: 将焦点移动到Tab序列的上一个元素,并且如果获得焦点的项目不在 menubar ,关闭其 menu 和所有打开的父级...禁用的菜单项是可聚焦的,但无法激活。 2. 菜单的separator不可聚焦或交互。 3....键盘互动 按钮有焦点: Space:激活按钮 Enter:激活按钮 按钮激活后,根据按钮的操作类型设置焦点。例如: 如果激活按钮打开一个对话框,焦点将移动到对话框内。

8.2K30

表单脚本

解决方式: (1)第一次提交表单后就禁用提交按钮。 要在“submit”事件处理函数处理,不能在“click”事件处理函数处理。... (3)表单字段事件 blur:当前字段失去焦点触发 change:对于和元素,在它们失去焦点且value值改变触发;对于元素,在其选项改变触发...focus:当前字段获取焦点触发 表单错误提示流程:利用focus事件修改文本框的背景颜色,以便清楚表明这个字段获取了焦点;利用blur事件恢复文本框的背景颜色;利用change事件在用户输入了非规定字符提示错误...过滤输入 (1)屏蔽字符 需要用于输入的文本不能包含某些字符,例如手机号,只能输入字符!...自动切换焦点 用户填写完当前字段,自动将焦点切换到下一个字段。

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

JavaScript 表单处理

if (e.ctrlKey && e.keyCode == 13) fm.submit();//判断按住了ctrl和enter键触发 PS:在表单尽量避免使用name="submit"或id="submit...共有的表单字段事件 表单共有的字段事件有以下三种: 事件名 说明 blur 字段失去焦点触发 change 对于和元素,在改变value并失去焦点触发;对于<select...二.文本框脚本 在HTML,有两种方式来表现文本框:一种是单行文本框,一种是多行文本框。...alert(textField.defaultValue);//得到最初的value值 选择文本 使用select()方法,可以将文本框里的文本选中,并且将焦点设置到文本框。...textField.select();//选中文本框的文本 选择部分文本 在使用文本框内容的时候,我们有时要直接选定部分文本,这个行为还没有标准。

4.8K101

C#学习笔记——回车Enter使输入焦点自动跳到下一个TextBox

在录入界面,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作。在C#实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法。...) { SendKeys.Send("{tab}"); } } 二、手动置下一个需要获取焦点文本框 如果想让焦点跳到任意文本框或者其他地方, 在文本框的键盘按下事件,将焦点放到目标文本框上...) { textBox2.focus(); //当在文本框1检查到回车键,直接将焦点转入TextBox2 } } 三、利用控件的SelectNextControl函数 按方法一设置好...TextBox的TabIndex和TabStop属性,在C# 回车Enter事件,调用控件的SelectNextControl函数,是的输入焦点跳到下一个TextBox(文本框)。...TextBox的Focus()方法允许程序在服务器端设置文本框焦点..

6.1K11

vue todolist案例_nodejs mvc

,输入命令npm i进行安装;并且安装npm i vue@2.6.10 3.引入Vue.js 我们在 app.js 编写Vue代码,所以要在 app.js 前面引入 4.数据渲染 4.1任务列表...(items )没有数据, #main 和#footer 标识的标签应该被隐藏 4.2 在最上面的文本框添加新的任务。...按Enter键添加任务列表,并清空文本框加载页面后文本框自动获得焦点,在 input 上使用 autofocus 属性可获得。 4.3 左下角要显示未完成的任务数量。...单击Clear completed按钮后,确保复选框清除了选中状态 列表没有已完成的任务,应该隐藏Clear completed按钮。...按Enter键 或 失去焦点 保存改变数据,移除editing 样式; 4.7 根据点击的不同状态( All / Active / Completed ),进行过滤出对应的任务,并进行样式的切换

1.3K10

项目开发实战_go项目实战

)没有数据, #main 和#footer 标识的标签应该被隐藏 任务涉及字段:id、任务名称( name),是否完成(completed true为已完成) 2.2 添加任务 在最上面的文本框添加新的任务...按Enter键添加任务列表,并清空文本框加载页面后文本框自动获得焦点,在 input 上使用 autofocus 属性可获得。...单击Clear completed按钮后,确保复选框清除了选中状态 列表没有已完成的任务,应该隐藏Clear completed按钮。...按Enter键 或 失去焦点 保存改变数据,移除editing 样式; 2.8 路由状态切换(过滤不同状态数据) 根据点击的不同状态( All / Active / Completed ),进行过滤出对应的任务...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.5K20

【愚公系列】2023年11月 Winform控件专题 TextBox控件详解

默认情况下,当用户按下回车键文本框会将焦点移动到下一个控件,而不是在文本框插入回车符。如果要允许在文本框输入回车符,则将AcceptsReturn属性设置为true。...默认情况下,当用户按下Tab键文本框会将焦点移动到下一个控件,而不是在文本框插入制表符。如果要允许在文本框输入制表符,则将AcceptsTab属性设置为true。...HideSelection属性设置为true控件失去焦点文本框的所选文本将不再被高亮显示,而是和其他文本一样显示。...HideSelection属性设置为false,无论控件是否获得焦点,所选文本都将以高亮显示的形式呈现。在这种情况下,即使失去焦点,选中文本仍然可见和可复制。...该属性将文本框的文本自动换行,以适应文本框的宽度。如果该属性设置为True,则文本框的文本超出文本框的宽度,文本将自动换行。

44923

Pythontkinter模块的常用参数总结

文本框宽度textvariable    可变文本,与StringVar等配合着用  Entry启用验证功能开关是vaildate  “focus”         Entry组件获得或失去焦点的时候去验证...  “focusin”        Entry组件获得焦点的时候去验证  “focusout”       Entry组件失去焦点的时候去验证  “key”          输入框编辑的时候验证...   指定组件被选中关联变量的值;variable   指定组件所关联的变量;indicatoron 特殊控制参数,为0,组件会被绘制成按钮形式;textvariable...     组件从被遮挡状态暴露出来时触发;Unmap       组件由显示状态变为隐藏状态触发;Map      组件由隐藏状态变为显示状态触发...;FocusIn       组件获得焦点触发;FocusOut       组件失去焦点触发;Property      窗体的属性被删除或改变触发;

77430

4. Vue基本指令

执行到else的时候, vue判断元素一样, 只是部分内容不同, 那就渲染不同的部分,相同的不会修改. 而我们输入的内容, 不在比较的范围内, 所以, 会被带过去. 如何避免这种情况呢?...现实与隐藏切换的很频繁的时候, 使用v-show 只有一次切换, 使用v-if 四. v-for指令 遍历有遍历数组, 遍历对象两种形式 1. 遍历数组 <!...当然不可以, 因为想数组增减元素的时候, index就变化了 4. 数组哪些方法是响应式的 其实, 通常我们在遍历数组, 修改数组的值的时候, 习惯于使用下标修改....但有时候, 我们不希望他每次变化都实时响应, 那么, 可以使用lazy修饰符 v-model.lazy , 使用了lazy以后按回车或者文本框是去焦点即同步内容 <!...2. number修饰符 通常我们在写一个只能输入数字的文本框, 会这么写 <!

8K10

Web APIs第二天

随机点名 // 需求:点击按钮之后,随机显示一个名字,如果没有显示则禁用按钮 开始点名吧 点击开始点名 function...随机点名案例 ①点击开始按钮随机抽取数组的一个数据,放到页面 ②点击结束按钮删除数组当前抽取的一个数据 ③抽取到最后一个数据的时候,两个按钮同时禁用 // 核心:利用定时器快速展示,停止定时器结束展示...小米搜索框案例 ①开始下拉菜单要进行隐藏 ②表单获得焦点 focus,则显示下拉菜单,并且文本框变色(添加类) ③表单失去焦点,反向操作 //需求:表单得到焦点,显示下拉菜单,失去焦点隐藏下来菜单 <...+1,点击减号,则文本框-1,如果文本框为1,则禁用减号 <input type="<em>button</em>...回调函数 如果将函数 A 做为参数传递给函数 B <em>时</em>,我们称函数 A 为回调函数 简单理解: <em>当</em>一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数 点击

1.1K60

表单

输入类型为radio或CheckBox使用此属性 文本框   用于输入单行文本信息将表单元素type设为text就可以了 密码框   ...与以上的表单元素不同的是email在提交表单是在自动验证如果不是一个有效的邮箱地址则用户不允许提交订单 url   用于输入URL地址这类的特殊文本的文本框提交表单如果输入不是...,如果所输入的数字不在限定的范围之内,   则会出现错误提示。...,最小值合法的间隔或默认,如果所输入的数字不在限定的范围之内, 则会出现错误提示。...表单元素的标注   使用foe属性来指定当鼠标点击脚本焦点对应的表单元素   语法 表单元素的id">标注的文本 <input type="text

4.7K90

JavaScript(十三)

-- 自定义提交按钮 --> Submit Form 只要表单存在上面列出的任何一种按钮,那么在相应表单控件拥有焦点的情况下,按回车键就可以提交该表单...提交表单可能出现的最大问题,就是重复提交表单。解决这一问题的办法有两个: 在第一次提交表单后就禁用提交按钮 利用 onsubmit 事件处理程序取消后续的表单提交操作。...重置表单 在用户单击重置按钮,表单会被重置。使用 type 特性值为 “reset” 的 input 或 button 都可以创建重置按钮,如下: <!...共有的表单字段事件 所有表单字段都支持下列 3 个事件: blur: 当前字段失去焦点触发 focus: 当前字段获得焦点触发 change: 对于 input 和 textarea 元素,在它们失去焦点且...value 值改变触发,对于 select 元素,在其选项改变触发 文本框脚本 ---- 在 HTML,有两种方式来表现文本框: 使用 input 元素的单行文本框 使用 textarea 元素的多行文本框

3.3K20

【愚公系列】2023年11月 Winform控件专题 Button控件详解

控件启用时,用户可以与其进行交互,否则它将处于禁用状态,不能与用户进行交互。例如,如果你有一个Button控件,当你设置Button的Enable属性为false,按钮将被禁用,用户将不能点击它。...同样,如果你有一个文本框控件,当你设置它的Enable属性为false,用户将无法编辑文本框的文本内容。...你可以通过以下方式设置控件的Enable属性:// 启用一个按钮button1.Enabled = true;// 禁用一个文本框textBox1.Enabled = false;有时候你可能需要动态地启用或禁用一些控件...另外需要注意的是,UseMnemonic属性为true,如果文本中有多个字符可作为快捷键,在显示只会显示第一个。...; }}当用户点击登录按钮,程序会读取文本框的用户名和密码,并将其与预先设置的“admin”和“123456”进行比较。

1.4K12

Java-GUI编程之事件处理

ContainerEvent 容器事件 , 容器里发生添加组件、删除组件触发该事件 。...WindowEvent 窗口事件, 窗 口状态发生改变 ( 如打开、关闭、最大化、最 小化)触发该事件 。 FocusEvent 焦点事件 , 组件得到焦点或失去焦点 触发该事件 。...KeyEvent 键盘事件 , 按键被按下、松开、单击触发该事件。 MouseEvent 鼠标事件,进行单击、按下、松开、移动鼠标等动作 触发该事件。...事件 触发时机 ActionEvent 动作事件 ,按钮、菜单项被单击,在 TextField Enter触发 AjustmentEvent 调节事件,在滑动条上移动滑块以调节数值触发该事件...ltemEvent 选项事件,当用户选中某项, 或取消选中某项触发该事件 。 TextEvent 文本事件, 文本框、文本域里的文本发生改变触发该事件。

1.4K20

【译】W3C WAI-ARIA最佳实践 -- 布局

如果网格包含用于选择行的复选框的列,焦点不在复选框上,可作为选中复选框的快捷键。 Control + A: 选择所有单元格。 Shift + Right Arrow: 向右扩展选择一个单元格。...以下为禁用和恢复网格导航功能的惯用键盘操作。 Enter: 禁用网格导航以及: 如果单元格包含可编辑内容,将焦点放置在输入框,例如 textbox。...如果输入框是个单行文本框,连续按 Enter ,会重置网格导航功能,或移动焦点到附近单元格的输入框。 如果单元格包含一个或多个组件,将焦点放置在第一个组件上。...字母数字键: 如果单元格包含可编辑的内容,则会将焦点放在输入框,例如 textbox。 网格导航被禁用时,导航行为的常规更改包括: Escape: 恢复网格导航。...组合包含三个或三个以上的控件,才能使用工具栏作为分组元素。 键盘交互 工具栏获取焦点焦点被设置在第一个可用控件上。

6.1K50

Windows 8.1 应用再出发 - 几种常用控件

OpticalMarginAlignment  枚举值,指定在与文本容器边界对齐如何处理每个字符版式靠边的值。有None(默认值) 和 TrimSideBearings 两种。...如果文本框允许换行符,则为 true;否则为 false。默认为 false。 FlowDirection  布尔值,确定文本框内容的流动方向。...Hover:将鼠标指针移到控件上方应引发 Click 事件,Press:按下鼠标按键且鼠标指针位于控件上方应引发 Click 事件,如果使用的是键盘,则指定在按下空格键或 ENTER 键且控件具有键盘焦点应引发...Click 事件,Release:按下并松开鼠标左键且鼠标指针位于控件上方应引发 Click 事件,如果使用的是键盘,则指定在按下并松开空格键或 Enter 键且控件具有键盘焦点应引发 Click...按钮点击,Flyout控件浮出,再点击按钮或空白处,Flyout消失。 <Button Content="Click Me."

2.2K40

事件基础及操作元素

网页的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮产生一个 事件,然后去执行某些操作。 1.2....不能再点击 disabled 我们想要这个按钮 button禁用            // btn.disabled = true;            this.disabled = true...案例分析: ①核心思路:点击眼睛按钮, 把密码框类型改为文本框就可以看见里面的密码 ②一个按钮两个状态,点击一次,切换为文本框,继续点击一 次切换为密码框 ③算法:利用一个flag变量赋值为0,来判断flag...(this.value === '手机') {                    this.value = '';               }                // 获得焦点需要把文本框里面的文字颜色变黑...if (this.value === '') {                this.value = '手机';           }            // 失去焦点需要把文本框里面的文字颜色变浅色

1.4K20
领券