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

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

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

8.3K30

表单脚本

解决方式: (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并失去焦点时触发;对于文本框脚本 在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.5K11

    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,则当文本框中的文本超出文本框的宽度时,文本将自动换行。

    56123

    Python中tkinter模块的常用参数总结

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

    87130

    4. Vue基本指令

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

    8K10

    Web APIs第二天

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

    1.1K60

    表单

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

    4.8K90

    JavaScript(十三)

    -- 自定义提交按钮 --> button type="submit">Submit Formbutton> 只要表单中存在上面列出的任何一种按钮,那么在相应表单控件拥有焦点的情况下,按回车键就可以提交该表单...提交表单时可能出现的最大问题,就是重复提交表单。解决这一问题的办法有两个: 在第一次提交表单后就禁用提交按钮 利用 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.8K12

    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.2K50

    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.3K40
    领券