一、原因

使用inputtype="password"类型,浏览器会提醒是否记住密码。

二、解决

取消type="password"

三、实现输入密码*代替

通过input输入框,监听输入值,进行替换成*符号,避免使用inputtype="password"类型,造成浏览器提醒是否记住密码。
如果是vue、react等项目请自行改造一下代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<script src="./jquery.min.js"></script>
<body><form id="forLogin" method='post' onsubmit="return mdFive();"><table><tr><td><table><tr><td align="left" class="text"><div class="text_user">用户名:</div></td><td><input id="input_text_user" name="user" type="text" autocomplete="off" />&nbsp;&nbsp;</td></tr><tr><td align="left" class="text"><div class="text_user">密码:</div></td><td id="textOrPsw"><input id="inputText" name="pswView" type="text" autocomplete="off" />&nbsp;&nbsp;</td><td><!-- 此处可以隐藏或将值放到变量中 --><input name="psw" id="psw" type="text" /></td></tr></table></td></tr><tr><td><input type="submit" id="submit" value="" /><input type='hidden' name='ACTION' value='SUBMIT' /></td></tr></table></form>
</body>
<script>$(document).ready(function () {var inputEle = $('#inputText');inputEle.on("keydown", handlerKeydown);inputEle.on("input", handlerPassword);var cursorStart = 0;var cursorEnd = 0;function handlerKeydown() {cursorStart = inputEle[0].selectionStart;cursorEnd = inputEle[0].selectionEnd;console.log(cursorStart,cursorEnd)}function handlerPassword(e) {var loginForm = document.getElementById("forLogin");var old_input = loginForm.pswView.value;var display_input = old_input;var hide_input = loginForm.psw.value.split("");if(e.originalEvent.data === ' ') {console.log('过滤空格');loginForm.pswView.value = hide_input.join("").replace(/./g,'*');return}var start = inputEle[0].selectionStart;var length = Math.abs(cursorEnd - cursorStart);console.log('cursorEnd - cursorStart: ' + length)console.log('cursorEnd:' + cursorEnd + ' ,cursorStart: '+ cursorStart + ' ,start:' + start)if (length == 0) {if (display_input.length < hide_input.length) {console.log('单个删除')hide_input.splice(start, 1);} else {console.log('添加')hide_input.splice(cursorEnd, 0, display_input.slice(cursorEnd,start));}} else {if (display_input.length < hide_input.length && cursorStart === start) {hide_input.splice(start, length);console.log('选中删除');} else {console.log('替换')hide_input.splice(cursorStart, length, display_input.slice(cursorStart,start));}}var viewPsdValue = "";var psdValue = "";for (var i = 0; i < old_input.length; i++) {viewPsdValue += "*";}psdValue = hide_input.join("");console.log('密码结果: ' + psdValue +'')loginForm.pswView.value = viewPsdValue;loginForm.psw.value = psdValue;inputEle[0].selectionStart = start;inputEle[0].selectionEnd = start;}});</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/89493.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/89493.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/89493.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【iOS】dyld加载流程——应用程序的加载

目录 前言 编译过程与动静态库 编译过程 动静态库 dyld &#x1f4cc; 什么是 dyld&#xff1f; dyld_shared_cache: dyld加载流程 _dyld_start dyldbootstrap::start dyld::main() 配置环境变量 共享缓存 主程序的初始化 插入动态库 link主程序 link动态库 弱…

从零开始,手把手教你本地部署Stable Diffusion AI绘画(Win最新版)

本号之前有发过一篇win平台的教程&#xff0c;由于是去年10月发布的&#xff0c;而Al绘画技术发展很快&#xff0c;那篇教程已经有些不适用了&#xff0c;有些同学执行到第二步就出错了。 应广大同学的期望&#xff0c;我更新一版新版详细教程。 一、前言 1.为什么要本地部署…

day21 力扣669. 修剪二叉搜索树 力扣108.将有序数组转换为二叉搜索树 力扣538.把二叉搜索树转换为累加树

修剪二叉搜索树 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元素的相对结构 (即&#xff0c;如果没有被移除&#xff0c;原有的父代子代关…

《设计模式之禅》笔记摘录 - 7.中介者模式

中介者模式的定义中介者模式的定义为&#xff1a;Define an object that encapsulates how a set of objects interact.Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently…

Flutter:上传图片,选择相机或相册:wechat_assets_picker

图片选择功能&#xff1a;可选单张&#xff0c;或多张。 1、showModalBottomSheet&#xff08;选择相册/相机&#xff09; 2、WechatImagePicker&#xff08;选取图片&#xff09; 3、CompressMediaFile&#xff08;图片压缩&#xff09;1、ActionSheetUtilimport package:duca…

pytest--0

1 pytest 使用方式 pytest测试框架-- 基本功能使用详解 2 pytest-mock常用方式 pytest–1–pytest-mock常用的方法 3

multiprocessing.Pool 中的 pickle 详解

前言&#xff1a; 在 Python 的 multiprocessing.Pool 中&#xff0c;任务和数据需要通过序列化&#xff08;pickle&#xff09;传递给子进程。pickle 是 Python 的内置序列化模块&#xff0c;用于将 Python 对象转换为字节流&#xff0c;以便在进程间通信时传递。然而&#xf…

Java集合框架体系详解:List/Set/Map接口对比与核心实现原理

一、集合框架核心接口对比 1.1 List/Set/Map接口特性接口类型特性描述典型实现List有序可重复&#xff0c;支持索引访问ArrayList/LinkedListSet无序不可重复&#xff0c;基于哈希表或树实现HashSet/TreeSetMap键值对存储&#xff0c;键唯一值可重复HashMap/TreeMap核心差异&am…

LeafletJS 进阶:GeoJSON 与动态数据可视化

引言 LeafletJS 作为一个轻量、灵活的 JavaScript 地图库&#xff0c;以其对 GeoJSON 数据格式的强大支持而闻名。GeoJSON 是一种基于 JSON 的地理数据格式&#xff0c;能够表示点&#xff08;Point&#xff09;、线&#xff08;LineString&#xff09;、多边形&#xff08;Po…

【STM32实践篇】:F407 时钟系统

文章目录1. 时钟与启动2. CubeMX 时钟树2.1 时钟源2.2 PLL 锁相环2.3 时钟分发与选择2.4 频率限制1. 时钟与启动 复位默认时钟&#xff1a;系统复位后&#xff0c;CPU 时钟默认由 16MHz 内部 RC 振荡器&#xff08;HSI&#xff09;提供&#xff0c;该 RC 振荡器经工厂校准&…

纯前端html实现图片坐标与尺寸(XY坐标及宽高)获取

纯前端html实现图片坐标与尺寸&#xff08;XY坐标及宽高&#xff09;获取。用于证书图片或pdf打印的坐标测定。 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>纯html前端实现图片坐标与尺寸&am…

飞睿UWB超宽带定位测距技术,数字钥匙重塑智能生活,高精度厘米级定位无感解锁

最近&#xff0c;数字钥匙领域动作频频&#xff0c;科技巨头与车企正掀起一波创新浪潮。小米15S Pro搭载恩智浦UWB芯片&#xff0c;用户靠近闸机即可无感通行深圳云巴一号线&#xff0c;轻触小米YU7车门自动解锁&#xff0c;实现手机-汽车-公共交通的无缝数字钥匙生态。在智能家…

基于springboot+vue+mysql平台的医疗病历交互系统(源码+论文)

一、开发环境 相关技术介绍 B/S模式分析 C/S模式&#xff1a;主要由客户应用程序(Client)、服务器管理程序(Server)和中间件(middleware)三个部件组成。客户应用程序是系统中用户与数据组件交互。服务器程序负责系统资源&#xff0c;如管理信息数据库的有效管理。中间件负责连…

arm架构,arm内核,处理器之间的关系

一、情景分析 我们经常说&#xff0c;stm32f103是采用cotex-M3内核&#xff0c;基于armv7架构设计的。 那么&#xff0c;stm32f103、cotex-M3、armv7之间有什么关系呢&#xff1f; 二、层次分析 1. 架构&#xff08;Architecture&#xff09; 定义&#xff1a;架构是处理器…

基于PHP的招投标系统_603gk

目录具体实现截图课程项目技术路线开发技术介绍PHP核心代码部分展示系统测试详细视频演示/源码获取具体实现截图 课程项目技术路线 招投标系统后端采用 PHP 语言搭配Thinkphp或者 Laravel 框架&#xff0c;PHP 语法简洁且功能强大&#xff0c;Laravel 或者Thinkphp框架能优化代…

深入解析 JavaScript 中的 `$.ajax()`:专业指南与实战示例

文章目录一、为什么需要 $.ajax()&#xff1f;二、核心语法解析三、关键参数深度剖析四、实战示例&#xff1a;从基础到进阶五、错误处理最佳实践六、性能与安全优化七、现代替代方案对比八、总结作为网站编辑&#xff0c;我将带您深入剖析 jQuery 的 $.ajax() 方法。本文不仅涵…

Flutter 前端开发中的常见问题全面解析

Flutter 开发中的常见问题全面解析一篇给 Flutter 开发者「灵儿」里里外外都能看的问题项。从基础开发到打包上线&#xff0c;每一步都充满坑&#xff0c;我们详细列出「环环盗光」的那些场景和解决思路&#xff01;【基础系统】开发环境问题 1. flutter doctor 报错 常见错误:…

STM32 单片机的停车场管理系统设计与实现

基于 STM32 的停车场管理系统设计与实现摘要随着城市汽车保有量的快速增长&#xff0c;停车场管理的效率与智能化水平愈发重要。本文设计并实现了一套基于 STM32 单片机的停车场管理系统&#xff0c;整合车辆检测、车位引导、计费管理及信息交互等功能。系统以 STM32 为控制核心…

STM32 写选项字 关键要加载HAL_FLASH_OB_Launch

AI乱写&#xff0c;还是得自己来&#xff01;void Write_OptionBytes_IWDG_STDBY(void) {FLASH_OBProgramInitTypeDef OBInit;HAL_FLASHEx_OBGetConfig(&OBInit); // 获取当前选项字节配置[6,7](ref)// 检查当前nRST_STDBY位&#xff08;IWDG_STDBY相关位&#xff09;是否…

153.在 Vue 3 中使用 OpenLayers + Cesium 实现 2D/3D 地图切换效果

&#x1f3ac; 效果演示截图 ✨ 前言 在实际项目开发中&#xff0c;我们经常需要提供「二维地图 三维地形」的可视化效果切换&#xff0c;例如&#xff1a; 智慧农业展示耕地分布 三维地形起伏&#xff1b; 智慧城市展示建筑物点位 三维城市&#xff1b; 数字孪生场景中&…