1.记住密码提示框

用JS实现：当鼠标移入的时候显示提示框，鼠标移出的时候隐藏提示框

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style>
 7             #div1{ 8                 width: 100px;
 9                 height: 50px;
10                 background: #FFCC99;
11                 border: 1px solid #FF9900;
12                 display: none;
13             }
14         </style>
15     </head>
16     <body>
17         <!--当鼠标移入的时候，把div1的style的display变成block-->
18          <input type="checkbox"   onmouseover="document.getElementById('div1').style.display='block';"
19              onmouseout="document.getElementById('div1').style.display='none';"/> 记住密码
20
21         <div id="div1">
22             为了您的账号安全，请谨慎选择！
23         </div>
24
25     </body>
26 </html>

代码如上，我们会发现，当鼠标移入选择框时会实现显示隐藏的功能，但是当鼠标移入“记住密码”这些字的时候，功能并不能实现，我们要想实现当移入密码也能实现此功能，只要加一个<lable>标签即可。

 1 <body>
 2         <!--当鼠标移入的时候，把div1的style的display变成block-->
 3         <label onmouseover="document.getElementById('div1').style.display='block';"
 4                onmouseout="document.getElementById('div1').style.display='none';">
 5             <input type="checkbox" /> 记住密码
 6         </label>
 7
 8         <div id="div1">
 9             为了您的账号安全，请谨慎选择！
10         </div>
11
12     </body>

这样就可以实现无论是移入字体还是选择框时都可以实现显示和隐藏的功能了。

第一小节总结：

效果原理

Js中的事件

当...时候

onmouseover(鼠标移入） onmouseout（鼠标移出）

alert的使用（弹出一个对话框）

元素获取

id（相当于名字）

document.getElementById() 获取元素

属性操作

obg.style.display=’block’

Js中class都叫做className

转载于:https://www.cnblogs.com/150536FBB/p/8711419.html

1.记住密码提示框相关推荐

[读码时间] 记住密码提示框
说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head><meta charset="utf-8&qu ...
关于selenium关闭chrome密码登录时弹出的密码提示框
最近在使用chrome登录网站的时候总有密码保存提示框(并不是所有的都会有密码保存提示框) 其实只需要设置启动chrome的相关参数就可以避免这种问题,参数: prefs["credenti ...
关于password导致input弹出浏览器记住密码弹框问题
关于password导致input弹出浏览器记住密码弹框问题问题描述问题解决代码实现问题描述当有input有password的输入框在的时候,其他input输入框可能会在获取光标的时候会弹出 ...
浏览器记住密码--原理/不记住密码的方法
原文网址:浏览器记住密码--原理/不记住密码的方法_IT利刃出鞘的博客-CSDN博客简介本文介绍浏览器是如何自动跳出保存密码的提示的,并介绍如何让浏览器不自动跳出保存密码的提示的方法. 记住密码的 ...
又省时间又省心，微信小程序记住密码功能大揭秘
前言微信小程序已经成为现代人生活中不可或缺的一部分,但是每次打开小程序都需要重新输入密码,这让人感到有些麻烦.那么,如何实现微信小程序记住密码呢?本文将为大家详细介绍. 实现思路其实实现的核心思路 ...
html记住密码勾选框,JS+CSS实现的一个记住密码的提示框
JS+CSS实现的一个记住密码的提示框_网页代码站(www.webdm.cn) body,input,p{margin:0;padding:0;} body{font:12px/1.5 Tahoma; ...
Chrome禁用浏览器的密码框自动保存密码提示输入（'autocomplete=off'在Chrome中不起作用解决方案）,以及密码和用户名回填无问题
1.Chrome禁用浏览器的密码框自动保存密码提示输入最近在做项目的时候,要求项目的密码框不显示所记住密码的提示框(就是密码输入框点击不显示该网站所保存的密码列表),然后试了很多方法.autocom ...
浏览器记住密码后，密码框自动填充功能禁用
大家在做修改密码功能的时候,需要手动输入原始密码来进行校验,然而浏览器记住密码后页面上的password框点击后会自动出现原始密码,这样即使不知道原始密码,也能进行密码的修改,是非常不安全的操作.参考 ...
css解决浏览器记住密码后input框的背景色为淡黄色的代码
谷歌浏览器.在记住密码后,会给用户密码输入框渲染上一个背景色,在有些时候这个浏览器自动使用的渲染背景色会影响页面的UI界面下面是css方法处理解决. input:-webkit-autofill , ...

1.记住密码提示框

1.记住密码提示框相关推荐

最新文章

热门文章

1.记住密码 提示框

1.记住密码 提示框相关推荐

最新文章

热门文章

1.记住密码提示框

1.记住密码提示框相关推荐