html:form标签的focus属性的作用

最新推荐文章于 2024-01-26 19:39:08 发布
最新推荐文章于 2024-01-26 19:39:08 发布
阅读量2.1w 收藏 4
点赞数
分类专栏： J2EE 文章标签： html javascript action input user
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thinkpadleo/article/details/600212
版权
你可以用focus属性来生成JavaScript，它会“定焦”（focus）到该form所包含的一个元素上。使用focus属性时你需要给它指定元素的名称。比如，以下代码是定焦在第二个Text元素上的：
<body>
<html:form action="/login" focus="password">
User Name: <html:text property="userName"/>
<br>Password: <html:text property="password"/>
<br><html:submit/>
</html:form>
</body>
该段代码会被转换成：
<body>
<form name="loginForm" method="post" action="/myStrutsApp6/login.do">
User Name: <input type="text" name="userName" value="">
<br>Password: <input type="text" name="password" value="">
<br><input type="submit" value="Submit">
</form>
<script language="JavaScript" type="text/javascript">
<!--
if (document.forms["loginForm"].elements[
"password"].type != "hidden")
document.forms["loginForm"].elements[
"password"].focus()
// -->
</script>
</body>
thinkpadleo
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html登录注册页面，登录和注册页面的实现HTML，CSS，JS
03-15
登录和注册页面是网站或应用程序中最基本和重要的功能之一。以下是使用HTML、CSS和JavaScript实现登录和注册页面的详细说明: 1. HTML结构: - 使用语义化的HTML标签构建页面框架,如`<header>`、`<main>`、`<footer>`等。 - 为登录和注册表单创建`<form>`元素,并设置适当的`action`和`method`属性。 - 使用`<input>`元素创建用户名、密码、电子邮件等字段,并设置正确的`type`属性。 - 添加`<button>`或`<input type="submit">`元素作为提交按钮。 - 根据需要添加其他元素,如标签、提示信息等。 2. CSS样式: - 使用CSS设置整体页面布局,包括标头、主体内容、页脚等。 - 设置表单样式,如字体、颜色、边框、间距等。 - 使用CSS伪类`:hover`、`:focus`等为表单元素添加交互效果。 - 利用CSS媒体查询实现响应式设计,适配不同屏幕尺寸。
jQ表单万能验证插件 vf-validate.js
11-23
插件简介：使用HTML标签属性，快速实现常用表单验证功能 JQ表单验证插件 使用方法：$.formValidate(options); version：1.6.0 @param {Object} options @param options.area 验证的区域父级元素，默认 body @param options.msg_type 错误提示类型：alert(自定义函数提示) , return(将错误提示直接返回) @param options.msg_func 自定义错误提示调用的函数，填写自定义提示函数名，插件自动传入参数（错误信息以及自定义参数）；默认（alert） @param options.focus 移动焦点到错误元素，默认关闭(false) 插件说明：利用 html 标签属性，表单自动验证；支持 为空、正则匹配、函数、非空匹配等验证 html标签属性说明： 1.vf-cate （可选）元素表单类型，可自动验证；支持：text，number，email，hidden，password，textarea，select，date，checkbox，radio 等 2.vf-type （必填）验证类型[可多个，用 "|" 进行分割]，支持：empty（为空验证），reg（正则匹配），func（函数调用），item（元素值比较，例如：item:#pwd 或 item:.pwd），length（长度验证，例 length:10 或 length:10-100）以及其他常用类型：mobile,tel,email,url,number,idcard,password,username,gbk 等 3.vf-msg （必填）验证错误提示[可多个，用 "|" 进行分割，顺序与vf_type对应] 4.vf-func （可选）调用验证的函数，当vf-type中包含 func 时，则必填；插件自动传入当前元素的JQ对象 5.vf-reg （可选）正则验证表达式，当vf-type中包含 reg 时，则必填 6.vf-name （可选）验证规则标识。可将当前规则->设置为全局验证规则（名称后加"/g"）；在同一页面下，可直接多次使用属性 vf-name 调用已有的全局规则，调用全局规则时无需加"/g" 7.vf-null （可选）非空验证：yes/no；开启后，若数据为空，则跳过当前数据验证 注： 1.验证的表单元素，需要添加 class 名 : vf-validate 方开启验证； 2.当使用 vf_func 调用其他验证函数时，会传入“当前元素”；且需要在验证函数中返回验证状态：true（验证成功），其他或false皆为验证失败 * 插件返回值： 1.当 options.msg_type 等于 alert 时：验证成功返回 true ， 失败返回 false； 2.当 options.msg_type 等于 return 时：验证成功返回 true ， 失败返回 错误信息； 3.当插件发生错误异常，也会直接 return 错误信息。所以判断时，建议以返回true为验证通过，其他皆视为不通过；
弹出式窗口,里面嵌入了一个form,之后用focus()方法让控件获取焦点
dongbeifox的专栏
11-05 437
http://www.iteye.com/topic/158475
涨芝士：取消input获得焦点属性focus
票票的博客
07-13 783
watch watch 首次变化不触发事件 props: { isFlag: { type: Boolean, default: false } }, watch: { 'isFlag'(val) { if (val) { doSome() } } } 首次加载，如果isFlag的值改变的话，isFlag里的if判断是不会执行的 解决方法：computed props: { isFlag: { type: Boolean, default: false }
android 焦点的作用,Android中的视图焦点Focus的详细介绍
weixin_39797381的博客
05-25 395
在非触摸屏设备中接收事件和处理响应的控件是具有焦点(Focused)的控件。一个窗口中一个时间内只能有一个具有焦点的控件。在早期具有滚轮设备的android系统中以及现在的智能TV电视应用中视图的焦点控制就非常重要了。而在触摸设备上通常默认情况下只有EditText控件才具有焦点，而我们通常会遇到的一个问题就是当进入一个具有EditText的界面时键盘就会自动弹出，而且有时候可能无法消失，但需求可...
focus属性在textarea上不能用
qq_45337854的博客
02-12 1528
** focus属性在textarea上不能用 ** 输入框获取焦点的属性 focus 在input标签 type为text时正常获取焦点打开输入法 在textarea标签时 模拟器正常 各种手机都不获取焦点 <a-textarea placeholder="Basic usage" :rows="1" /> ...
html5表单属性自动获得焦点,HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)...
weixin_35011928的博客
05-30 918
HTML5在表单中新添加了很多功能，梦龙小站将慢慢为大家介绍，今天为大家介绍HTML5表单中新添加的有关焦点的属性。HTML5添加了autofocus属性，这个属性在支持它的浏览器中，只要设置了这个属性，不用JavaScript动态获取焦点，就能自动把焦点移动到相应字段。小例子如下：HTML代码预览效果为了保证上面的代码在设置autofocus的浏览器中正常运行，咱们必须在JavaScript中检...
小程序中 input 的属性 focus 失效问题
热门推荐
qq_37449852的博客
09-23 1万+
小程序 组件input 中有一个 focus 属性， 只要他为 true 我们就可以自动唤起弹窗。进入页面初始化的时候点击一次是可以唤起的，但是他唤起之后点击其他区域， 键盘隐藏时候 再次点击就不能够唤起了。 解决思路: 确保你再次点击的时候 {{变量}} 的这个值 已经变成 true 了。 已经变成 true 了为什么不好使。。。事情都是要有一个开始和结束，如果没结束，你这边又开始了...
编译的 HTML 帮助文件 (.chm) DHTML手册
03-10
getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。 getElementsByName 根据 NAME 标签属性的值获取对象的集合。 getElementsByTagName 获取基于指定元素名称的对象集合。 hasFocus 获取表明对象...
jQuery详细教程
04-25
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。...
java hasfocus_Android·Focus机制解析和常见问题
weixin_34026997的博客
02-28 757
一、TouchModeAndroid支持多种交互方式：D-pad、滚动球、触摸屏等等。这些交互方式可以分为两类：TouchMode和非TouchMode。TouchMode对应触摸屏；非TouchMode对应实体键盘。两种模式中对Focus的需求也不同，例如点击button，在非TouchMode中需要先focus到button，再确认触发button的点击事件；在TouchMode中不需要先fo...
C# Form控件的Focus()方法总返回false
brook0344的专栏
05-23 5461
http://bbs.csdn.net/topics/310151502 private void Form1_Load(object sender, EventArgs e) { this.Show(); //先show才能设焦点. textBox2.Focus(); }
表单焦点: focus/blur
neweastsun的专栏
08-21 6725
表单焦点: focus/blur当用户点击或按TAB键时元素会获得焦点。也有autofocusHtml属性可以设置元素获取默认焦点，当页面载入或其他方式。获得焦点通常意味：准备在这里接受数据。所以此时我们可以写代码实现初始化或加载工作。失去焦点时刻可能更重要（“blur”）。当用户在其他地方点击或按TAB键使焦点移动至下一个表单域，或其他方式。失去焦点通常意味：数据已经进入。所以我们可以运行代码检查
JavaScript---------input标签的focus属性
最新发布
cmHuney的博客
01-26 942
focus属性是一种，它表示用户聚焦或选中了某个可编辑字段或其他可交互元素。，用户可以开始输入文本或执行其他交互操作。focus属性通常与JavaScript事件处理程序一起使用，例如onfocus和onblur事件。在HTML中，可以将focus属性添加到<input>标签中以监测并处理界面元素的焦点状态。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> /容器/ .container{ max-width: 400px; margin: 0 auto; text-align: center; margin-top: 100px; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 5px #ddd; } /表单组/ .form-group{ margin-bottom: 20px; text-align: left; } /表单组标签/ .form-group label{ display: inline-block; width: 70px; font-weight: bold; } /表单组输入框/ .form-group input{ display: inline-block; width: 200px; height: 30px; border-radius: 3px; border: 1px solid #ccc; padding: 5px 10px; } /输入框获取焦点时边框颜色/ .form-group input:focus{ outline: none; border-color: #1E90FF; } /按钮组/ .button-group input{ margin-right: 10px; background-color: #1E90FF; color: #fff; border: none; border-radius: 3px; padding: 5px 20px; font-weight: bold; } /按钮悬停时背景颜色和不透明度/ .button-group input:hover{ cursor: pointer; opacity: 0.8; } /注册组/ .register-group a{ font-size: 12px; text-decoration: none; text-align: right; color: black; } /注册链接悬停时文字下划线/ .register-group a:hover{ text-decoration: underline; } </style> </head> <body> <div class="container"> <form action="servletControllRegister" method="post"> <div class="form-group"> <label for="uname">用户名:</label> <input type="text" id="uname" name="uname"/> </div> <div class="form-group"> <label for="upwd">密码:</label> <input type="password" id="upwd" name="upwd"/> </div> <div class="button-group"> <input type="submit" value="注册"/> <input type="reset" value="重置"/> </div> <div class="register-group"> <a href="login.jsp">已有账号？点击登录</a> </div> </form> </div> </body> </html>是jsp页面
06-09
<form action="servletControllRegister" method="post"> ``` 修改为你实际的 Servlet 的 URL，例如： ``` <form action="/register" method="post"> ``` 其中 /register 部分是你实际的 Servlet 的 URL，根据你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值