登录页面出来的时候，可否将focus直接置到“用户名”输入框里面？

最新推荐文章于 2021-01-21 14:48:18 发布
最新推荐文章于 2021-01-21 14:48:18 发布 2443 收藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingofark/article/details/525
版权

登录页面出来的时候，可否将focus直接置到“用户名”输入框里面？这样比较方便。目前的情形是：登录页面出来之后，需要按三次Tab才能将focus切到“用户名”输入框；或者需要鼠标做精确定位置放focus。

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
kingofark
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
vue-focus-loop:Vue组件可帮助您将焦点捕捉到元素中
04-29
:fire: 小心！ 您在Vue 2兼容分支中，。 介绍 Vue组件可帮助您将焦点捕获到元素中。 在开发可访问的组件时，在某些行为中，将重点放在元素上很重要。 例如，当打开一个模态时，建议焦点仅位于该模态的可制表元素上，并且仅当模态关闭时才释放焦点。 安装 在您的Vue项目中添加@vue-a11y/focus-loop 。 npm install -S @vue-a11y/focus-loop # or yarn add @vue-a11y/focus-loop 或通过CDN < script src =" http://unpkg.com/@vue-a11y/focus-loop " > </ script > 用法 您可以在main.js中全局使用它。 import Vue from 'vue' import VueFocusLoop from '@vue-a11y/focus-lo
vue 表单输入框不支持focus及blur事件的解决方案
01-21
采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): 1.html引用: v-mtfocus 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面 } mtinput.onblur = functi
Javascript实现登录记住用户名和密码功能
12-10
话不多说，请看代码： 　　[removed] $(document).ready(function () { $("#UserAccount").focus(); //记住用户名和密码 $('#remebers').click(function () { if ($("#UserAccount").val() == "") { alert("用户名不能为空！"); } if($("#UserPassword").val() == "") { alert("密码不能为空！");
移动端 验证码/密码 输入框实现--安卓/ios适用
m0_37097272的博客
07-05 3693
先贴图，需要实现的效果是这样的。 实现思路有两个： 1、用6个input，输入一个数字后将focus给下一个输入框。 2、用一个input和6个span，input隐藏，用span显示。 现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了） 两种方案遇到的坑，以及优缺点，如下： 方案一：6个inp...
进入登录页时，用户名输入框自动聚焦、按enter键让密码框聚焦，完整输入信息后登录
Start2019
01-21 1315
让element-ui的输入框聚焦的4种方式 思路：（可以跳过这一步看完整代码——完整代码） 1. 进入页面时，用户名输入框就要获取焦点，使用 自定义指令 聚焦更方便。当然也可以用 ref 在 mounted() 钩子函数中让输入框聚焦。 mounted(){ this.$nextTick(()=>{ this.$refs.userName.focus(); }); } 2. 在用户输入框输入信息后，需要按 Enter 键，使下一个输入框聚焦，此时要用到按键事件。同时还要考
在进行验证的时候，用户名登录注册，然后没有输入用户名，提示“请输入用户名！”，并且出现focus（）函数，表示焦点在用户名输入框。
mll999888的专栏
03-28 4708
在进行验证的时候，用户名登录注册， 然后没有输入用户名，提示“请输入用户名！”，并且出现focus（）函数，表示焦点在用户名输入框。 function check(){    if(document.getElementById(''user_sn'').value==' '){               //document.getElementById('i
打开登录页面光标定位用户名框
Super_wolve的博客
04-11 743
光标定位到文本框 window.onload=function(){ var uname = $("[name='uname']").val(); var pwd = $("[name='pwd']").val(); if(uname==""){ $("[name='uname']").focus(); } } window.onload方法表示页...
登录框自动获取焦点
zhang245754954的博客
02-23 395
<script type="text/javascript"> $().ready(function(){ $("#index_loginForm input[name='name']").focus(); });</script>
进到页面后input输入框自动获取焦点
热门推荐
u010999809的博客
07-19 2万+
只要在该input标签后添加autofocus="autofocus"即可 代码实例：                   用户名：autofocus="autofocus"/>         密码：
光标自动定位到输入框
dw_java08的专栏
03-12 2万+
功能要求描述：打开ie，然后在地址栏中输入网址，显示系统登录页面，光标自动进入第一个输入框。 js代码： window.onload=function() { if(document.readyState=="complete") { document.getElementById("username").focus(); } } ...
登录系统保存账号密码后,当录入表单时会自动填充到表单的账号密码解决方案
筑梦人的博客
05-22 3916
在input框中加入:readonly onfocus="this.removeAttribute('readonly');"即可以解决此问题. 例如: <el-form-item label="邮箱" prop="username"> <el-input placeholder="请输入邮箱" v-model="re...
如何将光标在一进入页面就定位在你所想输入的那个输入框里面？
08-14 2700
以登录页面为例 代码如下： 用户名： 密   码： 在以上代码中，如果你想在项目中一进入这个页面就想光标自动定位在用户名输入框里面的话，只需在body标签定义即
解决记住登录账号密码的网站，会将账号密码回显到输入框问题
Lear的博客
09-18 7090
场景：某个网站登录时在浏览器会选择保存密码，则在页面上的输入框内会将该网站保存过的账号或密码回显。一般这种需求对用户是不需要的，所以下面为解决此问题的方法????： 1.input 标签不要用id选择器，去掉就不会自动回填浏览器自动保存的用户名,密码了。可以用class类选择器。 2.解决密码回显： 2.1“大部分浏览器都是根据表单域的type="password"来判断密码域”，因此解决办...
React按钮事件重新定位焦点到输入框
gaofengcs的博客
06-07 1342
import React, { Component } from "react"; class RefocusDemo extends Component { render() { return ( <div> <input ref="inputI" /> <input ref="inputII" /> <button onClick={this.refocus.bind(this)}>
制作一个html页面，有用户名密码，有登录注册功能，用现代样式
最新发布
03-26
由于我是AI语言模型，无法展示HTML页面，但我可以为你提供一份可供参考的HTML代码，你可以将其放在代码编辑器中查看效果，也可以在本地创建一个.html文件并将代码粘贴进去，在浏览器中打开该文件进行预览。 ``` <!DOCTYPE html> <html> <head> <title>登录/注册</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <style> body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background-color: #f2f2f2; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); margin: 20px auto; max-width: 400px; padding: 20px 40px; } h1 { font-weight: 700; margin-top: 0; } form { display: flex; flex-direction: column; } input { border: none; border-bottom: 2px solid #ccc; margin-top: 20px; padding: 10px; font-size: 16px; margin-bottom: 30px; transition: border-bottom 0.3s ease; } input:focus { border-bottom: 2px solid #2174ea; outline: none; } button { background-color: #2174ea; color: #fff; padding: 15px; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 20px; } button:hover { background-color: #1053ad; } .btn-link { text-align: center; margin-top: 20px; } .btn-link a { color: #2174ea; font-size: 14px; text-decoration: none; font-weight: bold; } .btn-link a:hover { text-decoration: underline; } .error { color: red; font-size: 14px; margin-bottom: 10px; display: none; } </style> </head> <body> <div class="container"> <h1>登录/注册</h1> <form id="login-form"> <label for="username">用户名</label> <input type="text" id="username" required> <label for="password">密码</label> <input type="password" id="password" required> <button type="submit">登录</button> <div class="btn-link"> <p>还未注册？<a href="#" id="register-link">点击此处注册</a></p> </div> </form> <form id="register-form" style="display: none;"> <label for="new-username">新用户名</label> <input type="text" id="new-username" required> <label for="new-password">新密码</label> <input type="password" id="new-password" required> <label for="confirm-password">确认密码</label> <input type="password" id="confirm-password" required> <button type="submit">注册</button> <div class="btn-link"> <p>已有账户？<a href="#" id="login-link">点击此处登录</a></p> </div> </form> <div class="error" id="error-msg"></div> </div> <script> const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); const loginLink = document.getElementById('login-link'); const registerLink = document.getElementById('register-link'); const errorMsg = document.getElementById('error-msg'); loginLink.addEventListener('click', () => { loginForm.style.display = 'block'; registerForm.style.display = 'none'; errorMsg.style.display = 'none'; }); registerLink.addEventListener('click', () => { loginForm.style.display = 'none'; registerForm.style.display = 'block'; errorMsg.style.display = 'none'; }); loginForm.addEventListener('submit', (e) => { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; // 这里可以用 AJAX 发送登录请求，以下为示例代码 if (username === 'admin' && password === '123456') { alert('登录成功'); } else { errorMsg.style.display = 'block'; errorMsg.innerHTML = '用户名或密码错误'; } }); registerForm.addEventListener('submit', (e) => { e.preventDefault(); const newUsername = document.getElementById('new-username').value; const newPassword = document.getElementById('new-password').value; const confirmPassword = document.getElementById('confirm-password').value; if (newPassword !== confirmPassword) { errorMsg.style.display = 'block'; errorMsg.innerHTML = '两次密码输入不一致'; return; } // 这里可以用 AJAX 发送注册请求，以下为示例代码 alert('注册成功'); loginLink.click(); }); </script> </body> </html> ``` 这份代码利用HTML、CSS和JavaScript语言实现了两个表单，一个为登录表单，一个为注册表单，用户通过点击“登录”或“注册”按钮来提交表单。同时，提供了切换登录/注册表单的功能。当用户输入的信息有误时，会显示出错信息。该页面做了一些基本的样式处理，如阴影、边框和鼠标悬停效果，看起来比较现代化。例如下图： ![Login-register-form-screenshot](https://raw.githubusercontent.com/Jessie365/Markdown-Photos/master/Login-register-form-screenshot.png)

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kingofark

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值