正文

仅使用 Javascript 显示/隐藏单击按钮的密码

 2023-02-24  91

关键词：

【中文标题】仅使用 Javascript 显示/隐藏单击按钮的密码【英文标题】：Show/hide password onClick of button using Javascript only 【发布时间】：2015-09-22 08:22:08 【问题描述】：

我想在仅使用 Javascript 单击眼睛图标时创建密码切换功能。我已经为它编写了代码，但它仅用于显示密码文本而不是相反。谁能看到下面代码中的逻辑错误。

function show() 
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'text');


function hide() 
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'password');


function showHide() 
  var pwShown = 0;

  document.getElementById("eye").addEventListener("click", function() 
    if (pwShown == 0) 
      pwShown = 1;
      show();
     else 
      pwShow = 0;
      hide();
    
  , false);

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" onclick="showHide()" id="eye">
  <img src="eye.png" />
</button>

【问题讨论】：

【参考方案1】：

简单的内联解决方案：

<input type="password" id="myInput" name="myInput">
<button onclick="myInput.type = (myInput.type=='text') ? 'password' : 'text'; return false;"></button>

【讨论】：

【参考方案2】：

我们可以通过onclick事件来获取，我们看例子。很简单

HTML

<span>
      <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png"  onclick="showHide()" id="eye" />
</span>

Javascript

function showHide() 
                if (pwd.type == 'text') 
                    pwd.type = 'password';
                
                else 
                    pwd.type = 'text';

【讨论】：

【参考方案3】：

  function action() 
    var my_pass = document.getElementById("pass");
    if (my_pass.type === "password") 
      my_pass.type = "text";
     else 
      my_pass.type = "password";

&lt;input type="checkbox" onclick="action()"&gt;Show &lt;input type="password" id="pass" value="my-secret"&gt;

【讨论】：

【参考方案4】：

按照以下步骤操作：下载下面给出的图像。做一个文件夹。在同一文件夹中添加您的 html 文件和图像。相应地替换 javascript 和 html 代码中“b.src”的值。

图片：

function show() 
  var a = document.getElementById("pwd");
  var b = document.getElementById("EYE");
  if (a.type == "password") 
    a.type = "text";
    b.src = "https://i.stack.imgur.com/waw4z.png";
   else 
    a.type = "password";
    b.src = "https://i.stack.imgur.com/Oyk1g.png";

<input type="password" id="pwd">
<button onclick="show()"><img src="https://i.stack.imgur.com/Oyk1g.png" id="EYE"></button>

【讨论】：

【参考方案5】：

转储眼睛图像，并根据其状态使用显示“显示”或“隐藏”的按钮。然后，您只需单击按钮的文本。您可以将按钮样式化为无边框，并且最初具有与其周围相同的背景。通过设置 .show:hover 来突出显示按钮以使按钮的背景变亮或使显示/隐藏文本的颜色变亮。通过将输入和按钮放在同一个跨度中，您将使它们既内联（ CSS - spandisplay: inline-block; ）并垂直对齐同一个底部。

在空格下方使用普通文本输入来显示验证错误警报。确保其标签索引为 -1，并且其背景颜色和边框与其周围相同。

  .
  .
  .

  <span class="pwSpan">
    <input type="password" placeholder="Password" id="pwd"  class="masked"  name="password" onblur="return checkPassword();"/>
    <button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" >
    </button>
  </span>
  <input type="text" class="error" name="pwErr" value="" tabIndex="-1" />
  .
  .
  .

function showHide()

   const pwField = document.getElementById("pwd");
   const showHideValue = document.getElementById("show").value;

   if(showHideValue.trim() === "Show")
   
      showHideValue = "Hide";
      pwField.setAttribute('type', 'text');
   
   else 
   
      showHideValue = "Show";
      pwField.setAttribute('type', 'password');

【讨论】：

【参考方案6】：

function myFunction() 
    var x = document.getElementById("myInput");
    if (x.type === "password") 
        x.type = "text";
     else 
        x.type = "password";

另见https://www.w3schools.com/howto/howto_js_toggle_password.asp

【讨论】：

【参考方案7】：

最简单的方法是使用带有onclick 属性的按钮来切换输入的类型。

<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
  else password.type = 'text';">toggle</button>

【讨论】：

【参考方案8】：

我的代码中的 JQuery 解决方案：（只需更改 ID）。

$(document).ready(function () 
        $("#eye").click(function () 
            if ($("#password").attr("type") === "password") 
                $("#password").attr("type", "text");
             else 
                $("#password").attr("type", "password");
            
        );
  );

【讨论】：

@downvoter - 如果指定原因，我将不胜感激问题中可能缺少 jQuery 标签【参考方案9】：

这是对 Tunaki 的回答的改进。我们甚至不需要检查表单域已经处于哪个状态，因为这将完全由鼠标的状态决定。这使得密码只能被暂时查看（只要鼠标按钮被按住在按钮上）。

<html>
<head>
    <title>Visible Password Test</title>
</head>

<body>
Password : <input type="password" name="password" id="password" />

<button type="button" id="eye" title="Did you enter your password correctly?" 
    onmousedown="password.type='text';" 
    onmouseup="password.type='password';" 
    onmouseout="password.type='password';">Peek at Password</button>

</body>
</html>

【讨论】：

【参考方案10】：

在您的 Javascript 代码的 else 部分中，变量“pwShown”拼写错误（如“pwShow”）。因此，pwShown 永远不会被重置为 0。

【讨论】：

【参考方案11】：

在您的代码中，每次调用 showHide() 函数时，pwShown 变量都会设置为 0。

您需要将 pwShown 变量声明为全局变量。

var pwShown = 0;
function showHide()

 ...

【讨论】：

【参考方案12】：

您不需要维护一个额外的“pwShown”变量来决定是显示文本还是隐藏它。您需要做的就是检查“pwd”元素的“type”属性，如下所示：

Working Example

JavaScript：

document.getElementById("eye").addEventListener("click", function(e)
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password")
            pwd.setAttribute("type","text");
         else 
            pwd.setAttribute("type","password");
        
    );

HTML：

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" />
         </button>

【讨论】：

【参考方案13】：

每次单击按钮时都会绑定单击事件。您不想要多个事件处理程序。此外，您在每次点击时都会重新定义 var pwShown = 0，因此您永远无法恢复输入状态（pwShown 保持不变）。

移除onclick属性并绑定点击事件addEventListener:

function show() 
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');


function hide() 
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');


var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () 
    if (pwShown == 0) 
        pwShown = 1;
        show();
     else 
        pwShown = 0;
        hide();
    
, false);

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png"  />
</button>

【讨论】：

点击后能否更改图标 pwShown=!pwShown【参考方案14】：

根据您编写的内容，您将在 html 和 javascript 中添加事件（在 showHide 函数内）。也许您可以将您的 js 代码从您拥有的更改为：

function showHide()

  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") 
    show();
   else 
    hide();

【讨论】：

Jquery使用if for css单击显示隐藏按钮

...作一个按钮来切换另一个div的可见性...这是我正在使用的JavaScript$(document).ready(function()varnavwidth=$(\'div#navigationpanel\').css(\ 查看详情

单击仅使用 JavaScript 从 JSON 获取的表数据中的按钮时引用特定行

】单击仅使用JavaScript从JSON获取的表数据中的按钮时引用特定行【英文标题】：ReferspecificrowonclickofbuttonintabledatafetchedfromJSONusingonlyJavaScript【发布时间】：2018-08-2204:45:33【问题描述】：我正在学习AJAX，但无法找到如何引用从.json文... 查看详情

Razor 显示/隐藏基于使用 javascript 的单选按钮

】Razor显示/隐藏基于使用javascript的单选按钮【英文标题】：Razorshow/hidebaseonradiobuttonusingjavascript【发布时间】：2021-12-0817:23:18【问题描述】：我正在尝试在ASPMVC剃刀视图中隐藏或显示文本框，现在我使用javascript来处理当我单击单... 查看详情

使用 JQuery 仅显示一个元素

】使用JQuery仅显示一个元素【英文标题】：ShowOnlyOneElementwithJQuery【发布时间】：2010-09-1504:44:19【问题描述】：单击链接时，我一次只需要显示一个元素。现在我通过再次隐藏所有内容然后切换单击的元素来作弊。这行得通，除... 查看详情

显示/隐藏 DIV 元素 Javascript 的多次不需要的点击

】显示/隐藏DIV元素Javascript的多次不需要的点击【英文标题】：Multipleunwantedclickswithshowing/hidingDIVelementsJavascript【发布时间】：2018-06-0807:48:15【问题描述】：我编写了一个函数，当您单击适用的按钮时，它会隐藏或显示div的内容。... 查看详情

如何仅在javascript中单击按钮时执行操作

我已经创建了一个带有动作功能的按钮，如下所示，但在单击动作按钮之前会触发警报消息（单击我）。如何仅在单击按钮（单击我）时才显示警报消息，而不是在下拉选项值中选择“一个”时。<palign="center"><buttonstyle="he... 查看详情

单击提交按钮后，PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div

】单击提交按钮后，PHP文件和Javascript函数未捕获Htmldivid以显示隐藏的div【英文标题】：PHPfileandJavascriptfunctiondoesn\'tcaptureHtmldividtoshowhiddendivafterclickingsubmitbutton【发布时间】：2022-01-1119:12:00【问题描述】：我在index.php中有这个div<... 查看详情

隐藏仅使用 CSS 显示内容列表，不使用 javascript

】隐藏仅使用CSS显示内容列表，不使用javascript【英文标题】：HideShowcontent-listwithonlyCSS,nojavascriptused【发布时间】：2013-07-1721:00:39【问题描述】：我一直在寻找一个好技巧来制作隐藏/显示内容或仅使用CSS而没有javascript的列表。我... 查看详情

Javascript - 使用按钮显示和隐藏表格行

】Javascript-使用按钮显示和隐藏表格行【英文标题】：Javascript-showandhidetablerowswithbuttons【发布时间】：2014-09-2622:47:50【问题描述】：我正在尝试借助按钮显示/隐藏表格行。使用我现在使用的脚本，我只能制作一个按钮，并且只能... 查看详情

JavaScript：单击按钮后在 div 中加载图像

】JavaScript：单击按钮后在div中加载图像【英文标题】：JavaScript:LoadImagesinadivafterclickingabutton【发布时间】：2016-12-0108:46:32【问题描述】：我有一个隐藏的div（通过使用最大高度和过渡），当我单击按钮时会显示。此div包含在您首... 查看详情

在Javascript中隐藏一个按钮

】在Javascript中隐藏一个按钮【英文标题】：HidingabuttoninJavascript【发布时间】：2012-01-3021:20:54【问题描述】：在我最新的程序中，有一个按钮，单击时会显示一些输入弹出框。这些框消失后，如何隐藏按钮？【问题讨论】：你是... 查看详情

仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减

】仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减【英文标题】：Dynamicallygenerateforminputfiledsincrementanddecrementonclickofbuttonusingpurejavascriptonly【发布时间】：2019-10-0203:38:47【问题描述】：ES6/Purejavascript/无框架或jquery/... 查看详情

如何仅使用 javascript、html5 css3 实现 - 单击按钮时画布上图像的缩放效果？

】如何仅使用javascript、html5css3实现-单击按钮时画布上图像的缩放效果？【英文标题】：Howtoimplementusingjavascript,html5css3only-zoomingeffectforimageoncanavsonbuttonclick?【发布时间】：2015-07-1721:32:06【问题描述】：我正在尝试使用比例，但它... 查看详情

Javascript：使用切换按钮隐藏和显示 div 标签

】Javascript：使用切换按钮隐藏和显示div标签【英文标题】：Javascript:HidingandShowingdivtagwithatogglebutton【发布时间】：2014-01-2616:10:12【问题描述】：我会直接说：我需要做的是通过按下一个按钮隐藏一个特定的div，它应该是一个切换... 查看详情

在单击按钮之前不要加载 JavaScript 标记

】在单击按钮之前不要加载JavaScript标记【英文标题】：DonotloadaJavaScripttaguntilyouclickonabutton【发布时间】：2021-08-0220:24:07【问题描述】：我有一个在页面加载时不应加载的第三方javascript代码。因此，当您单击“请求更多信息”时... 查看详情

如何使用按钮单击来切换 div 的可见性

...【发布时间】：2013-10-0503:11:20【问题描述】：下面是我的javascript代码，当我点击button时，它会显示div。再次点击时如何隐藏它？然后点击它，div应该再次可见？<scripttype="text/javascript">var_hidediv=nu 查看详情

与javascript和phpwhile循环一起使用

...环获取此数据时，它仅适用于第一个元素。请帮助我usedjavascriptasbellow<script>functionhide_editbtn(){varrmrate=document.getElementsByClassName("roomrat 查看详情

在javascript单击处理程序中隐藏和单选按钮和复选框标签

】在javascript单击处理程序中隐藏和单选按钮和复选框标签【英文标题】：HideZendradiobutton&checkboxlabelsinjavascriptclickhandler【发布时间】：2013-10-2308:27:36【问题描述】：我在表单中使用Zend单选按钮和复选框，但是当用户单击其他... 查看详情