开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用javascript屏蔽HTML输入？

要使用JavaScript屏蔽HTML输入，可以使用以下方法：

使用HTML的<input>标签的type属性设置为password。这将在输入时隐藏文本，并在浏览器中显示黑色圆点或星号。

如果您希望使用JavaScript进一步控制屏蔽过程，可以使用以下代码：

<!DOCTYPE html>
<html>
<head><style>
  .maskedInput {
    display: inline-block;
    background-color: white;
  }
  .maskedInput span {
    display: none;
  }
</style><script>
  function maskInput(inputElement) {
    var maskedInput = inputElement.parentElement;
    var hiddenInput = maskedInput.querySelector('input[type="hidden"]');
    var visibleInput = maskedInput.querySelector('input[type="text"]');
    var maskCharacter = '*';

    visibleInput.value = '';
    hiddenInput.value = '';

    visibleInput.addEventListener('input', function () {
      var maskedValue = '';
      for (var i = 0; i< this.value.length; i++) {
        maskedValue += maskCharacter;
      }
      hiddenInput.value = this.value;
      visibleInput.value = maskedValue;
    });
  }
</script>
</head>
<body>
  <div class="maskedInput">
   <input type="text" onfocus="maskInput(this)" />
   <input type="hidden" />
    <span>已屏蔽输入</span>
  </div>
</body>
</html>

在这个示例中，我们创建了一个名为.maskedInput的CSS类，该类将文本输入框的值替换为星号，并将原始输入值存储在隐藏的输入字段中。当用户单击输入框时，将调用maskInput函数，该函数将为文本输入框添加事件监听器，以便在用户输入时屏蔽输入。

请注意，这个示例仅用于演示目的，实际应用中可能需要进行更多的优化和调整。

相关搜索:HTML在输入中多次使用Javascript HTML输入显示不随javascript更改 JavaScript If条件语句不屏蔽输入值 JavaScript没有存储HTML输入值作为JavaScript变量的HTML输入使用HTML/Javascript将输入写入弹出窗口使用javascript从输入数组创建HTML列表使用JavaScript返回HTML输入使用javascript进行HTML输入验证使用输入标签的Javascript/HTML屏幕键盘

相关搜索:

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

有帮助

没帮助

相关·内容

从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式

大家好，这里是「 Daotin的梦呓」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！ 1、对样式的操作 1.1、点击按钮设置 div 的宽高和背景颜色 <body> <input type="button" value="显示颜色" id="btn">

04

事件基础及操作元素

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

02

20.DOM

定义文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签

05

前端基础-节点操作

document.createElement() 用来生成网页元素节点，参数为元素的标签名；

01

百度前端学院js课堂作业合集+分析(更新中...)

第一课：简陋的登录框 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <ti

09

前端-part6-DOM查找标签以及JS操作样式绑定事件

1.location的用法和弹出框处理 location.href // 可以用于获取当前的URL location.href="http://www.baidu.com" // 这种组合可以跳转到指定的页面 alert("这是一个弹出框"); confirm("你确定吗？"); prompt("输入点什么吧"); 2.及时相关的行为 var t1 = setTimeout("alert('对不起, 要你久候')", 3000 ) // 第一个参数代表行为，第二个代表过多久执行这个动作 clearTim

00

JQuery中DOM操作[续]

10、设置和获取HTML、文本和值示例代码

选择你喜欢的水果？

<form action=”” method=”post”> 用户输入<input name=”title” id=”myinput” value=”请输入内容” /> </form> <script language=”javascript”> var p_html=$(“p”).html();//获取p元素的html代码，注意这里包含了 //如果需要重新设置，只需

06

移动端Webapp中的那些Bug

持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0（IOS 10.3.3） Github: webapp-bugs 1. IOS overflow: scrol

05

jQuery开发技巧

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

02

常用的键盘事件

1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListen

03

说说几个 API 和应用案例

除了 classList.contains 方法之外，还有一个 node.contains 方法，这个方法返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。语法：

02

js基本操作

js操作页面三步骤 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作页面的三步骤</title> </head> <body>

操作页面的三步骤

box h1

</body> <script> // 1、获取页面标签 // 2、设置操作的激活条件 - 事件 // 3、具

01

JavaScript实现模糊推荐的input框(类似搜索框)

如何用JS实现一个类似搜索框的输入框呢，再填充完失去焦点时，自动填充配置项，最终效果如下图：实现很简单，但是易用性会上升一大截，需要用到的有jquery-ui的autocomplete，jquery

09

前端之BOM和DOM

BOM(Browser Object Model)浏览器对象模型，它使得JS能够与浏览器进行‘对话’（交互，通过JS对页面内容进行操作）。

03

第85节：Java中的JavaScript

后代选择器：选择器1 选择器2 子元素选择器：选择器1 > 选择器2 选择器分组：选择器1，选择器2，选择器3{} 属性选择器：选择器[属性名称='属性值']

02

模仿京东购物车实现加减操作

在线展示：https://gethtml.cn/project/2020/04/15/index.html

02

jQuery学习笔记之概念（1）

jQuery学习笔记之概念（1） ——————————————————————学习目录———————————————————— 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuery的Ajax ———————————————————————————————————————————————— 前言:当前流行的JavaScript库有： jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR 1.概念：核心库、UI和插件等。 jQuery是继承prototype之后又一个优秀的JavaScript库。现在jQuery主要包括核心库、UI和插件等。。 jQuery凭借着简介的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM。处理事件执行动画和开发ajax的操作。

02

BootStrap应用开发学习入门

[TOC] 0x00 前言简介什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产

02

总结收藏的41个JavaScript实用技巧

在文件的根目录放进去这个图片，后缀修改成ico就可以了 6. 可以在收藏夹中显示出你的图标

01

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字

09

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭