回车即可提交非form数据

最新推荐文章于 2023-04-19 13:29:28 发布

原创最新推荐文章于 2023-04-19 13:29:28 发布 · 置顶 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #function

java/web 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript为网页上的按钮添加回车键触发提交功能的方法。通过监听键盘事件并判断按键是否为回车键，使得用户可以通过按下回车键来激活提交按钮，从而实现快速提交操作。

view plain copy to clipboard print ?

<script language="javascript">
window.document.attachEvent("onkeydown", function(){
if(window.event.keyCode == 13){
var submit = document.getElementById("submit");
submit.focus();
//另一种激活的方法
//submit.fireEvent("onclick");
//注：fireEvent不能与focus共存，否则提交两次
}
});
function submit(){
alert('提交成功');
}
</script>
<body>
<input type="button" id="submit" value="点回车亦可提交" onclick="submit()"/>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coffeeing

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Form表单自动提交

m0_57448314的博客

06-06

3133

表单提交是提交到指定的地址。知识点： 1.创建一个项目，引入需要用到的CSS、JS、jQuery文件。既然是表单就会使用栅格布局。 2.栅格布局就要使用到container或 .container-fluid容器。 3.代码打出“form”点击“TAB”，即可自定生成（如下图）： 4.action：提交的地址 method：提交的方式 5.常用的两种提交方式：post（这里使用post提交方法）、get（默认的提交方式）。 6.表单元素 <i...

没有form表单情况下敲回车键提交表单的js代码

10-29

通常，提交表单需要用户点击一个按钮或者按表单中某个按钮的快捷键，但很多时候，开发者希望用户在输入信息后按下回车键即可提交表单。然而，如果页面中没有form标签，传统的提交方式不再适用，此时我们需要通过...

参与评论您还未登录，请先登录后发表或查看评论

elementui el-form 支持回车提交

鬼谷中妖

08-07

1807

别人写的非常好，转载过来 https://blog.youkuaiyun.com/asing1elife/article/details/82711366 在表单的提交按钮上添加 Vue 原生属性 native-type=“submit” 可以让按钮变为表单提交按钮当表单中只有一个输入框时，按钮会默认为提交按钮设置默认的提交按钮后需要阻止表单默认提交事件，在表单上添加 @submit.native.prevent 即可 <el-form ref="form" :model="user" :rules="r

Angular【form 表单】自动提交问题

^Being^

04-19

1206

使用 angular 中的 form 表单，表单内任意 input 输入框聚焦时，点击键盘上的 enter 键，form 表单会自动提交......

php提交form表单提交方式,php form表单的提交

weixin_42114580的博客

04-01

6181

PHP表单之在Web页面中插入表单在普通的WEB页面中插入表单是如下的：这里将创建一个比较完整的表单,将中的元素和属性全部基本全部都展示出来。charset="UTF-8"title>indextablewidth="400"border="1"cellpaddingbgcolor="#999">trbgcolor="#ffcc33">td="103"height="25"ali...

【form 表单】提交表单数据；文本框按下回车自动触发表单提交、输入框宽度自适应长度

花铛

04-25

753

按下提交按钮，浏览器将自动发出请求，携带输入的数据跳转到 action 指定的页面。

php form提交不清空,PHP问题：php如何实现表单提交后不清空

weixin_33622555的博客

03-20

615

php表单提交后不清空的实现方法：首先打开相应的代码文件；然后在“session_start()”之后，字符输出之前写上语句“header(“Cache-control: private”);”即可。推荐：《PHP视频教程》php表单提交完返回，表单内容不清空解决方法我们经常在注册的时候，填写一大推信息以后在提交注册的时候，因为某一项信息不正确，在返回的时候之前的填写的内容全部没有了，这样会导致用...

form表单提交的几种方式

热门推荐

a1194821568的博客

06-04

17万+

表单提交方式一：直接利用form表单提交 html页面代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <form action="h...

form表单会跨域_关于form与表单提交操作的一切

weixin_39575047的博客

12-30

769

你知道，一个表单里面只要有form元素，如果没有给action加一个默认值，为空白的时候，当你刷新页面时，会弹出一个警告框提示你已经填入表单，刷新数据将会丢失。如果一个表单里面有一个type="submit"的button、或者type="submit"的input，或者type="image"的input，点击则会触发表单提交动作。即使你使用了return false，按钮也还是会提交submi...

HTML-form表单和提交

好好学习，天天向上

04-13

1513

HTML-form表单和提交

关于form与表单提交

weixin_45259626的博客

07-07

735

一个表单里面只要有form元素，如果没有给action加一个默认值，为空白的时候，当你刷新页面时，会弹出一个警告框提示你已经填入表单，刷新数据将会丢失。如果一个表单里面有一个type="submit"的button、或者type="submit"的input，或者type="image"的input，点击则会触发表单提交动作。即使你使用了return false，按钮也还是会提交submit动作。 form元素 form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它

文本框回车提交与禁止提交示例

09-05

文本框回车提交功能允许用户在填写完信息后，按下回车键即可触发特定的提交操作，如搜索、发送信息等，这极大地方便了用户交互。然而，有时我们可能需要禁用这种默认行为，例如防止误操作或在特定条件下不进行提交。...

jsp中如何实现按下回车键自动提交表单

10-21

在JSP（JavaServer Pages）中，实现按下回车键自动提交表单的功能主要依赖于JavaScript，因为HTML本身不提供...这样，用户无需手动点击提交按钮，只需在表单内的任何输入框中按下回车即可完成提交，提高了用户体验。

jquery按回车提交数据的代码示例

10-26

在本示例中，我们将探讨如何使用jQuery监听键盘回车事件并利用Ajax提交数据。这种技术通常用于表单提交，提高用户体验，使得用户无需点击按钮只需按下回车键即可完成提交。首先，我们要关注的核心代码是这样的： ...

用js读写xml文件

07-27

6685

用js可以读写xml文件，但是在客户端修改保存xml文件好像有问题，因为客户端没有权限修改服务器端得东西。所以需要修改xml文件并保存的话可能还得用后台的java代码才行，这里的js代码只作参考。这里先保留一下，以备自己将来可能用到这些代码的时候也好查阅。:) 这段代码我在使用的时候也测试过，在最后保存xml文件的时候老是报"权限不足"的错误。最后还是换成了后台保存。java后台修改保存x

struts2标签获取parameter,request,session,application中的值

05-24

3912

request.----> s:property value="#request.mySessionPropKey"/> or s:property value="#request[mySessionPropKey]"/> or s:property value="#request[myRequestPropKey]"/> or${requestScope.bu

修改jetty端口

12-04

3656

修改Jetty的端口 etc/jetty.xml中修改

图片左右无间断滚动效果的实现代码

09-05

2889

图片左右滚动示例代码 http://192.168.0.40/voucher/images/left.png" style="cursor: pointer;" onclick=clearright();toleft()>

jetty服务器中配置虚拟路径

11-05

1784

在jetty.xml中添加如下的代码即可 /files D:/images

el-form提交对话框

最新发布

07-30

### 提交对话框中的 `el-form` 表单数据在使用 `el-form` 构建的对话框中实现表单提交功能，需要结合 `ref`、`model`、`rules` 等属性进行数据绑定和校验，并通过事件监听控制提交行为。以下为实现方法及常见问题的解决方案。 #### 表单提交与数据绑定在对话框中定义 `el-form` 组件，并通过 `:model` 绑定一个数据对象（如 `addForm`），该对象将用于存储表单字段的值。例如： ```html <el-dialog :visible.sync="addDialogVisible" title="添加任务"> <el-form :model="addForm" :rules="rules" ref="addFormRef"> <el-form-item label="任务名称" prop="taskName"> <el-input v-model="addForm.taskName"></el-input> </el-form-item> <el-form-item label="价格模型" prop="priceModel"> <el-select v-model="addForm.priceModel"> <el-option v-for="item in priceOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> </el-dialog> ``` 在 `methods` 中定义 `submitForm` 方法，通过 `this.$refs.addFormRef.validate()` 校验表单数据，校验通过后提交至后端接口： ```javascript submitForm () { this.$refs.addFormRef.validate(valid => { if (valid) { // 提交表单数据 this.$http.post('/api/tasks', this.addForm) .then(response => { this.$message.success('提交成功'); this.addDialogVisible = false; this.getTaskList(); }) .catch(error => { this.$message.error('提交失败'); }); } }); } ``` #### 防止回车键触发表单提交当表单中仅包含一个 `el-input` 文本框时，按下回车键会触发默认的表单提交行为，导致页面刷新。为避免该问题，可以在 `el-form` 上添加 `@submit.prevent` 事件阻止默认提交行为： ```html <el-form :model="SearchForm" @submit.prevent> <el-form-item prop="SearchText"> <el-input v-model="SearchText" placeholder="物品编号" /> </el-form-item> </el-form> ``` 此方式确保即使按下回车键，也不会触发页面刷新，而是由开发者控制提交逻辑[^1]。 #### 文件上传与表单数据绑定在需要上传附件的表单中，可使用 `el-upload` 组件结合 `on-success` 回调获取上传后的文件信息，并将其绑定到 `addForm` 的字段中。例如： ```html <el-form :model="addForm" ref="addFormRef"> <el-form-item label="附件"> <el-upload action="/api/upload" :on-success="handleUploadSuccess" :auto-upload="true"> <el-button>上传文件</el-button> </el-upload> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> ``` 在 `handleUploadSuccess` 方法中更新 `addForm` 的附件字段： ```javascript handleUploadSuccess(response, file) { this.addForm.fileId = response.fileId; } ``` 提交时，`addForm` 中将包含上传后的文件信息，可一并发送至后端接口[^2]。 #### 表单重置与对话框关闭为确保每次打开对话框时表单处于初始状态，可在对话框关闭时调用 `resetFields()` 方法重置表单状态： ```html <el-dialog :visible.sync="addDialogVisible" @close="resetForm"> ``` ```javascript resetForm () { this.$refs.addFormRef.resetFields(); } ``` 该方法会将表单字段恢复到初始值，并清除校验状态，避免前一次提交的影响。 #### 自定义校验规则与错误提示 `el-form` 支持通过 `:rules` 属性定义校验规则，并在 `el-form-item` 中通过 `prop` 指定字段进行校验。例如： ```javascript rules: { taskName: [ { required: true, message: '任务名称不能为空', trigger: 'blur' } ], priceModel: [ { required: true, message: '请选择价格模型', trigger: 'change' } ] } ``` 在表单项中指定 `prop` 即可启用校验： ```html <el-form-item label="任务名称" prop="taskName"> <el-input v-model="addForm.taskName"></el-input> </el-form-item> ``` 提交时，若校验失败，会自动显示错误提示信息，无需手动处理。 ---