我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:
1. 如果表单里有一个(含一个以上)type=”submit”的按钮,回车键生效。
2. 如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
5. type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。
实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。
分享到:
相关推荐
然而,如果表单包含两个或多个文本输入框,浏览器就不会在任何输入框中按下回车时自动提交表单。这是浏览器的一个默认行为。 针对这一行为,我们可以采取以下策略来禁止回车键提交表单: 1. 添加一个隐藏的文本...
这是因为浏览器遵循一种默认的行为:在一个表单内,如果只有一个单行文本输入域(`<input type="text">`),在该输入域中按下回车键,浏览器会认为这是用户的提交意图,从而自动提交表单。 这个问题在实际应用中...
### Selenium高级自动化(图文教程)- 抢先版 #### 一、环境搭建与配置 **1.1 环境搭建** ##### 1.1.1 Selenium简介 Selenium 是一个强大的自动化测试工具,主要用于Web应用的测试,支持多种编程语言如Python、...
在这段代码中,`send_keys()`方法模拟了用户在文件选择对话框中输入文件路径的行为,然后自动提交选择。 2. **非`<input type="file">`的文件上传** 对于那些不使用标准`<input type="file">`的上传控件,...
例如,`Ctrl+Shift+Enter`可以在当前行下方插入新行,`Ctrl+Delete`可以删除当前行。 3. **表格处理**: 在Excel或Google Sheets中,用户可以轻松地增加或删除行来组织数据。增加一行通常是点击行号后的加号,删除...
- **JavaScript 数据处理:** 使用数组存储数据,监听表单提交事件来处理数据。 **实现思路:** 1. **HTML 结构:** ```html <input type="text" id="itemName" placeholder="Enter item name"> ...
# 按下回车键提交搜索 search_box.send_keys(Keys.RETURN) # 关闭浏览器 driver.quit() ``` 这段代码演示了如何在 Google 页面中进行搜索。通过 `find_element_by_name` 方法定位到搜索框元素,然后使用 `send_...
在这个项目"Iris_Flower_...用户可以通过一个简单的Web界面上传Iris花的特征,然后模型会自动预测其种类,提供了一种直观且易用的交互方式。同时,HTML标签用于构建用户友好的前端界面,使得整个系统更加完整。
- **工作流程**:通过actions提交mutation,由mutation改变state,然后通过getters获取state。 #### 13. Vue.js的响应式系统是如何工作的?请解释Vue.js中响应式数据的原理。 Vue.js的响应式系统通过Object....
- **POST 方法**:用于向服务器提交数据。 - **PUT 方法**:用于更新服务器上的资源。 - **DELETE 方法**:用于删除服务器上的资源。 #### 示例代码: ```javascript fetch('https://api.example.com/data', { ...
string deleteCmd = "DELETE from Employee where emp_id = " + intEmpID.ToString() 4.删除表格记录警告 private void DataGrid_ItemCreated(Object sender,DataGridItemEventArgs e) { switch(e.Item.ItemType) {...
`control_set_text`函数用于设置文本框的值,即图片的URL,然后发送“Tab”键来切换到确认按钮,最后发送“Enter”键进行提交。 对于不依赖Flash的网页,可以使用`selenium`直接操作隐藏的`<input>`元素,例如: `...
在Django框架中,表单验证是一个至关重要的部分,它确保了用户提交的数据符合应用的需求和安全标准。Django提供了强大的表单系统,允许开发者方便地定义表单字段、验证规则以及处理表单数据。在本篇文章中,我们将...
- **设置当前session是否对修改的数据进行自动提交**: `set autocommit on|off` - **示例**: `set autocommit on` - **在用start命令执行一个sql脚本时,是否显示脚本中正在执行的SQL语句**: `set echo on|off` ...
102 <br>0162 如何实现C#中用<Enter>键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 ...
All open test architecture API classes and methods can be referenced from the VAPI-XP user interface so that you can easily include them in your test script. About Working with System Tests You ...