开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在用户提交表单后将焦点放在精选div或成功消息上

在用户提交表单后将焦点放在精选div或成功消息上，可以通过以下步骤实现：

监听表单的提交事件，可以使用JavaScript来实现。例如，使用addEventListener方法监听表单的submit事件。
在表单提交事件的处理函数中，阻止表单的默认提交行为，以便我们可以自定义处理。
根据需要，在表单提交事件处理函数中执行以下操作：
- 获取需要设置焦点的目标元素，可以通过元素的id、class或其他属性来获取。
- 使用JavaScript的focus方法将焦点设置到目标元素上。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>表单提交后设置焦点</title>
</head>
<body>
  <form id="myForm">
    <!-- 表单内容 -->
    <input type="text" id="name" placeholder="姓名">
    <input type="email" id="email" placeholder="邮箱">
    <button type="submit">提交</button>
  </form>

  <div id="selectedDiv">
    <!-- 精选div内容 -->
  </div>

  <div id="successMessage">
    <!-- 成功消息内容 -->
  </div>

  <script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止表单的默认提交行为

      // 设置焦点到精选div或成功消息上
      var selectedDiv = document.getElementById('selectedDiv');
      var successMessage = document.getElementById('successMessage');

      if (selectedDiv) {
        selectedDiv.focus();
      } else if (successMessage) {
        successMessage.focus();
      }
    });
  </script>
</body>
</html>

在上述示例中，我们使用了JavaScript来监听表单的提交事件，并在事件处理函数中阻止了表单的默认提交行为。然后，根据条件判断，将焦点设置到精选div或成功消息上。

请注意，上述示例中的代码仅为演示目的，实际应用中需要根据具体情况进行适当的修改和调整。

相关搜索:如何在不同php文件处理的表单提交后在html表单下方显示成功消息在提交之前，同一页面上的多个表单将焦点放在相同的输入上如何仅在表单提交后才显示错误或验证消息，而不是在用户键入antd时显示？尝试使用警告消息之后的id将焦点设置在表单元素上，但提交的是jsp页面如何在提交联系人表单后在同一页面中获取成功消息？在控制器操作返回的部分视图提交Ajax表单后，如何在返回的div上触发函数？如何避免在以JQuery对话框形式弹出HTML表单时自动将焦点放在第一个输入字段上？在reactjs中提交表单后，如何从一个页面获取数据或将数据从一个页面传递到另一个页面 linuxs 教程 linux双工测试

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

angularjs输入验证[通俗易懂]

原文 http://www.cnblogs.com/woshinidezhu/p/Form-validation-with-AngularJS.html

03

1-html标签介绍

onkeypress在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有，alt,ctrl,shift,esc

01

Angularjs的表单验证

在AngularJS中，有许多用于验证的指令。我们将先学习几个最流行的内置指令，然后再创建一个自定义验证规则的指令。

01

浅谈RPA软件如何填写富文本框

什么是富文本框？富文本框就是在网页上可以输入带格式的文本输入框。在富文本框中，可以设置使用不同的字体、颜色，可以控制段落、边距，还可以插入图片、表情等。是实现在线编辑不可或缺的工具。在html表单控件里，并没有标准的富文本框控件，一般使用特定元素和css，js配合实现。

02

快来使用 React-Hook-Form 搭建强大的React表单

在React中构建表单时，必须使用一个表单库，该库提供了许多方便的工具，而且不需要太多代码。

02

JavaScript(十三)

这一篇，我们说说表单。 JavaScript 最初的一个应用，就是分担服务器处理表单的责任。

02

电商/票务类小程序必读，如何用小程序推送消息？

通常，服务方向用户推送的消息都带有通知性质，文案也相对固定。服务方将这类固定的文案制作成模板，这些文案就可以快速重复使用。

02

面试题必备-web页面基础

html标签是由<>包围的关键词 html标签是成对出现的有部分标签是没有结束标签的，叫单标签，页面中所有的内容，都是要放在HTML标签中的

01

表单脚本

刚开始人们使用JavaScript，最主要的目的之一就是表单的验证，分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。

04

通过 Laravel 创建一个 Vue 单页面应用（六）

我们将完成基本 CURD 的最后一部分：创建新用户。您已经拥有了我们之前讨论过的主题中所需要的所有工具，因此可以尝试创建用户并将本文与您的工作进行比较。

02

readonly 和 disable的区别

readonly和disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）。一般比较常用的情况是：

04

【Java 进阶篇】JavaScript 表单验证详解

JavaScript 表单验证是网页开发中不可或缺的一部分。它允许您确保用户在提交表单数据之前输入了有效的信息。无论您是一个初学者还是一个有经验的开发人员，本文将为您详细介绍如何使用 JavaScript 来进行表单验证。我们将从基础知识开始，逐步深入，以确保您全面了解这个主题。

02

html+css学习笔记011-表单

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终责任与担当这几天公司招聘文案好几个应聘上的孩子答应的好好的第二天来上班然而却一去不复返给公司的工作计划造成了极大的困扰并不是责备他们而是从他们身上看到了以前那任性和不负责任的自己原来当初我那些自以为小小的无所谓的举动会给亲人、朋友和同事带来那么大的麻烦只是他们选择了宽容 <!DOCTYPE html> <html lang='en'>

03

分析：input表单输入框默认提示信息

相信上面两张图片上的输入框里有提示信息这功能大家都见过，有的人应该也自己动手做过。

05

HTML 表单和约束验证的完整指南

在本文中，我们将研究 HTML 表单字段和 HTML5 提供的验证选项。我们还将研究如何通过使用 CSS 和 JavaScript 来增强这些功能。

04

『教程』如何突破微信小程序模板消息限制实现无限制主动推送

基于微信的通知渠道，微信小程序为开发者提供了可以高效触达用户的模板消息能力，在用户本人与小程序页面有交互行为后触发，通过微信聊天列表中的服务通知可快捷进入查看消息，点击查看详情还能跳转到下发消息的小程序的指定页面。

00

[猫头虎分享21天微信小程序基础入门教程]第13天：小程序的表单与用户输入处理

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何在小程序中创建和处理表单与用户输入。这是开发交互性小程序的基础。🚀

00

晓实战 | 第一手小程序模板消息推送开发心得分享

我们会定期邀请优秀的开发者，从实践的角度，亲自分享他们使用知晓云（cloud.minaapp.com）开发的实战经验。

05

【Java 进阶篇】Java Response 重定向详解

在Java Web开发中，重定向（Redirect）是一种常见的技术，用于将用户从一个URL地址自动重定向到另一个URL地址。这在很多情况下都非常有用，例如在用户登录后将其重定向到其个人资料页面，或者在进行某些操作后将其重定向到一个感谢页面。本篇博客将详细介绍Java中如何使用HttpServletResponse对象来进行重定向操作，适用于基础小白。

03

HTML标签介绍「程序员培养之路第一天」

2、HTML 标签通常成对出现，分为标签开头和标签结尾，例：<html> </html>

01

JavaScript表单基础

我们应该知道JavaScript设计的的初衷很大程度上是为了处理表单验证，因为在那个远古时代表单验证是通过后台来验证的，网速都比较慢，我们向后台发送数据都需要很长时间才能接收返回数据，动则几分钟少则几十秒，用户体验极其不佳。JavaScript在设计在网页校验，直接就能告诉用户结果，它还增加了很多表单控件的默认行为，这直接让这门语言火了起来。

02

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

邮政地址通常很长，有时很难记住。在许多情况下，需要较短的地址。例如，能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen和Harold Goddijn 于2001年开发了Mapcode系统，以便为世界上任何物理地址创建简短地址。

02

【ASP.NET Core 基础知识】--MVC框架--Models和数据绑定

Models和数据绑定在ASP.NET Core MVC中扮演着关键的角色，对于构建强大、灵活和可维护的Web应用程序至关重要。这一节我们就来讲一下。

01

前端之form表单与css（1）

form表单用于用户界面向服务器传输数据，实现用户和web服务器的交互。表单包含input系列标签如文本字段、复选框、单选框、提交按钮等。

01

第 14 篇：交流的桥梁“评论功能”—— HelloDjango 系列教程

截止到目前为止我们的 django blog 文章展示部分，已经实现的“八九不离十”了。你以为本系列文章就要结束了吗？不能够！新的征程才刚刚开始，HelloDjango 系列文章刚刚过半，后面的文章你将接触更多博客系统的细节。向着一个小而全的博客系统前进、前进、前进，你定会收获颇多。

02

零基础使用Django2.0.1打造在线教育网站（十一）：登录页面实现

努力与运动兼备～~~有任何问题可以加我好友或者关注微信公众号，欢迎交流，我们一起进步！

01

angularjs学习第五天笔记（第二篇：表单验证升级篇）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

01

angularjs学习第五天笔记（第二篇：表单验证升级篇）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

03

JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战

1、事件监听机制概述事件监听机制，指的是某些组件被执行了某种操作后，触发某些代码的执行。事件：某些操作，如：单击、双击操作，键盘按下了，鼠标移动了。事件源：组件，如按钮、文本输入框；监听器：代码。注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听代码。常见的事件： 1）点击事件：1、onclick：单击事件 2、ondbclick：双击事件 2）焦点事件：1、obblur：失去焦点，一般用于表单校验

02

在 PHP 中使用和管理 Session

与 Cookie 一样，Session 技术也是用于解决 HTTP 协议无状态的问题，不过，与 Cookie 数据保存在客户端不同，Session 数据存储在服务端，然后通过分配一个全局唯一的 ID 与特定用户关联（通常在用户认证通过后分配），但 Session 又与 Cookie 紧密关联，因为这个 Session ID 通常会存储到 Cookie 中，在其生命周期内，用户发起请求时就会带上它，这样服务端通过解析存储在 Cookie 中的 Session ID 就能识别特定的客户端用户，并返回与之关联的 Session 数据，比如前面提到的电商网站中的购物车数据。

03

前端基础（HTML，CSS，JavaScript）知识笔记，附：前端基础面试题！！

<form></form> 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

02

为什么有些前端一直用 div 当按钮，而不是用 button？

在前端开发中，我们通常会使用不同的HTML元素来实现按钮的功能。有些前端开发者习惯使用div元素来创建按钮，而不是使用专门的button元素。本文将探讨为什么有些前端开发者一直使用div作为按钮的替代方案，并介绍使用button元素的优势。

02

AngularDart4.0 指南- 表单顶

表单是商业应用程序的主流。您可以使用表单登录，提交帮助请求，下订单，预订航班，安排会议，并执行无数其他数据录入任务。

03

angularjs学习第四天笔记（第一篇：简单的表单验证）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

02

angularjs学习第四天笔记（第一篇：简单的表单验证）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

01

在 Laravel 控制器中进行表单请求字段验证

在 Web 应用中，用户提交的数据往往是不可预测的，因此一个非常常见的需求是对用户提交的表单请求进行验证，以确保用户输入的是我们所期望的数据格式。很多 Web 框架都对此功能专门提供了工具集，Laravel 也不例外，而且这个工具集异常丰富，基本上涵盖了目前主流的所有验证规则，即使是一些非常个性化的验证，也可以基于 Laravel 验证类的扩展功能来自定义验证规则，非常强大。接下来，我们就一起来看看如何在 Laravel 中对表单请求进行验证。

01

PHP 用户请求数据获取与文件上传

我们上篇教程提到，要获取 HTTP 请求数据，可以通过 $_GET、$_POST、$_REQUEST 等 PHP 内置的超全局变量，如果要获取 Cookie 和文件上传信息，可以通过额外的 $_COOKIE 和 $_FILES。今天，学院君就来给大家演示下如何使用这些超全局变量获取请求数据。

02

django后台添加学生-jquery实现表单正则表达式验证，判断是否可以进行提交

01

thinkphp-ajax异步验证之ajaxReturn的使用

但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

03

什么是 JavaScript 事件？

JavaScript事件是指在网页中发生的交互性操作或特定的系统事件，例如用户的点击、鼠标移动、按键按下等。通过JavaScript，你可以捕捉和处理这些事件，并在事件发生时执行相应的代码。

02

想不到大厂面试中的“幂等”性，竟然如此简单！

大家好，我是阿沐！”幂等“这个词语或许小伙伴很少见，基本上中小型公司或者一些大公司都未使用过，但是并不代表小伙伴们没有接触到。

00

表单的 9 种设计技巧【下】

书接上文（表单的 9 种设计技巧【上】），码匠继续为您分享表单交互设计中的小技巧～

00

13个秘技，快速提升表单填写转化率！

我其实指的是网页注册表单。除了增加线索和提高转化率外，注册表单还可以帮助企业扩大邮件数据库，并更加了解那些对公司和产品感兴趣的人。注册表单只需要几分钟制作时间并且可以嵌入到网站的任何地方。

03

什么是AJAX？

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

02

JavaScript 学习-42.jQuery 提交表单 submit() 方法

前言 submit() 方法不带参数，就是触发 submit 事件，带function 参数，就是执行 submit 事件时运行的函数。触发 submit 事件通过 jquery 的submit() 方法，可以出发submit 事件 form表单示例 <form id="demo" method="get">

<label for="user">用户名:</label> <input type="text" id="us

04

Ajax(二)

enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义。

02

【转】jQuery验证控件jquery.validate.js使用说明+中文API

一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:

04

原生标签的能力你挖掘了多少？

震惊，type="range" 居然可以实现评星功能：type="range" 实现

02

jquery的form表单提交

在Web开发中，表单提交是一个常见的操作，通过表单提交用户可以向服务器发送数据。jQuery是一个流行的JavaScript库，可以简化处理JavaScript的操作，包括表单提交。在本篇博客中，我们将介绍如何使用jQuery来实现表单提交操作。

01

【Java 进阶篇】Java登录案例详解

登录是Web应用程序中常见的功能，它允许用户提供凭证（通常是用户名和密码）以验证其身份。本文将详细介绍如何使用Java创建一个简单的登录功能，并解释登录的工作原理。我们将覆盖以下内容：

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭