bootstrap表单input回车自动提交请求问题

最新推荐文章于 2024-07-11 16:15:56 发布
最新推荐文章于 2024-07-11 16:15:56 发布
阅读量2.5k 收藏 1
点赞数 1
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/CrazyBoy1024/blog/3006654
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

遇到bootstrap的一个问题，当使用form标签的时候，页面内如果只有一个input输入框，回车会自动提交表单发送请求（类似刷新的效果，附带url参数）。

解决方法：

1.添加一个隐藏输入框。 当form内有两个input的时候不会触发回车自动提交。

<input type="hidden" id="other">

2.把form改为div，使用js获取input的value。

转载于:https://my.oschina.net/CrazyBoy1024/blog/3006654

weixin_33953249
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap表单按回车会自动刷新页面的解决办法
08-31
主要介绍了bootstrap表单按回车会自动刷新页面的问题及解决办法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
BootstrapPlugin - tags 插件编写 (原创bootstrap插件)
04-14
Bootstrap 提供了一套响应式的栅格系统，以及预定义的 CSS 类，如 `.form-control` 用于表单元素，`.badge` 用于表示标签等。这些类将为我们构建 Tags 插件提供基础。 1. **HTML 结构** Tags 插件的 HTML 结构...
Form表单Input中按enter键自动提交的问题
Mr_linjw的专栏
10-17 1971
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个。，按回车键表单会自动提交，但是当表单中存在多个。时，按回车键不会执行任何操作，这是。
input 阻止表单输入框的回车键触发提交事件
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-11 1138
layui组件。 input输入框，阻止回车键触发提交事件。 $("addMylable input").keydown(function (event) { if (event.keyCode == 13) { return false; } })
input输入框按回车键提交表单问题
蓝沐的博客
03-16 1万+
今天发现一个奇怪的问题，当页面只有一个input文本框（type="text"）时，将鼠标焦点置于这个文本框，然后按回车键（enter键）时会提交表单数据。查了一下，原来这是浏览器的默认行为，当form中只有一个input文本框（type="text"）时，用户按回车键会提交这个form表单。从这句话中我们就可以得到产生这种行为的条件就是（1）form中只有一个文本框。（2）用户在文本框中...
input输入框回车提交
TinaTxt的博客
01-26 3192
1.方法1 $('#applyCertNum').bind('keypress',function(event){                                if(event.keyCode == 13)                {                alert('你输入的内容为1：' + $('#applyCertNum').val())
vue在input中输入后，按回车，提交数据
骨子里的偏爱
04-06 3959
vue在input中输入后，按回车，提交数据
HTML+JS 实现 input 框回车事件
热门推荐
m0_55080712的博客
09-09 1万+
很多时候input框我们输入结束后都习惯直接按回车，而不是点击button。在form表单中可以实现点击回车即可提交表单，但如果只是一个单独的input框，则无法通过直接按回车来提交内容。这种情况我们可以使用JavaScript脚本实现input框回车事件，其实现方法很简单，这里用到了jQuery框架，代码如下：只需要在script标签中直接加入以下内容即可。keycode==13即代表按下了回车键，同理可以通过更改此代码实现其他按键的触发事件。
几个实用的 jQuery 表单操作代码片段
03-07
当用户在表单中按下回车键时，有时我们不希望表单被意外提交。通过监听 `keypress` 事件，我们可以阻止回车键（键盘码13）触发表单提交。 ```javascript $("#form").keypress(function(e) { if (e.which == 13) ...
AngularJS对动态增加的DOM实现ng-keyup事件示例
11-29
这个示例展示了如何在用户交互中动态地将非输入元素（如`<p>`或`<div>`)转化为输入框（`<input>`），并在用户输入内容后通过回车键触发特定操作。首先，让我们分解实现这一功能的关键步骤。 1. **DOM操作**： - 当...
table动态添加行并编辑
09-12
在网页开发中，表格（Table）是一种常见的数据展示方式，特别是在需要展示结构化...在实际项目中，还可以结合AJAX实现异步数据加载和保存，或者利用Bootstrap、Element UI等前端框架提供的组件，使界面更加美观和易用。
分类搜索框网页特效推荐
11-10
4. AJAX 实时搜索：当用户输入内容时，使用AJAX异步发送请求到服务器，获取并显示匹配的搜索结果，而不必等待用户提交整个表单。这需要熟悉XMLHttpRequest或fetch API。 5. 响应式设计：确保分类搜索框在不同设备和...
form 表单只有一个input 时，回车自动提交表单造成页面刷新效果
qq_39706777的博客
02-03 1718
el-form 中仅有一个input，input上设置了回车响应事件，首次按回车键后，页面刷新，再次按回车才执行了响应事件
bootstrap制作搜索框及添加回车搜索事件
weixin_30549175的博客
05-26 686
　　下面是开发中用bootstrap制作的一个搜索框，以及给搜索框添加回车搜索事件的一个小案例。 　　 　　bootstrap制作搜索框及添加回车搜索事件 　　　　下面是功能实现的代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"&...
Bootstrap系列之输入组（Input group）
老__L的博客
06-14 3349
在input的任意一边放置一个附加组件或按钮。你也可以在input的两边都放一个。记住将放在输入组之外。 默认情况下，输入组通过来适应输入组中自定义的表单字段验证。你可以用来禁用它。 将相对表单大小类添加到本身，其中的内容将自动调整大小，而不需要在每个元素上重复表单控件大小类。 在输入组的插件中放置任何复选框或单选选项，代替文本。 虽然可支持多个，但验证样式仅用于具有单个的输入组。 支持多个插件，可以与复选框和单选输入版本混合使用。 输入组包括支持自定义选择和自定义文件输入。不支持这些浏览器的默认版本
表单中的输入框回车就自动提交
weixin_46352558的博客
05-15 478
代码如上 ， 因为我比较喜欢写form表单包住输入框所以就会遇到这种问题，原因大致是因为form的表单属性导致的 加上一个 @submit.native.prevent 就可以解决了。
当只有一个input获取焦点的时候直接回车，会提交内容 刷新页面
qq_34629527的博客
03-14 387
只有一个input获得焦点时直接回车 刷新页面
前端js优化表单中单个输入框的回车提交事件
m0_73117087的博客
12-12 610
通过以上优化方法，我们可以避免在只有一个输入框的表单中，回车键触发表单提交事件的问题。
bootstrap 表单提交
09-03
使用Bootstrap表单提交，可以使用HTML中的form元素和相关属性进行操作。在Bootstrap中，可以使用以下代码来创建一个表单： ```html <label for="inputName">Name: <input type="text" class="form-control" id=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值