如何查看和隱藏表中所有行的密碼

show password功能僅適用於條目的第一行，不適用於下一個條目/行。這些項目使用foreach通過數據庫顯示。顯示/隱藏密碼將如何適用於所有條目？有任何想法嗎？？我的代碼如下：如何查看和隱藏表中所有行的密碼

HTML：

<td data-title="Password"><input id="viewPass" type="password" value="<?php echo $item["password"]; ?>" readonly/></td> 
<button type="button" id="viewPswd" class="btn btn-default"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button> 
<script src="js/showPass.js"></script>

的Javascript：

var myButton = document.getElementById('viewPswd'), 
    myInput = document.getElementById('viewPass'); 
    myButton.onclick = function() { 

     'use strict'; 

     if (this.id === 'viewPswd') { 
      myInput.setAttribute('type', 'text'); 
      this.textContent = 'Hide'; 

     } else { 

      myInput.setAttribute('type', 'password'); 

      this.id = 'viewPswd'; 
     } 
    };

來源

2017-05-07 K.Jue

的問題是'Id'選擇適用於單個元素。你必須在這裏使用'class'選擇器。 –

我已經嘗試過但它不工作。 –

簡單：**不要顯示密碼。**應用程序或數據庫中的任何位置都不應讀取/解碼密碼。 – Thomas

如果您想使用多個按鈕和文本框，您必須將其分配爲共同的name或class或個人id。

您不能將相同的id分配給所有元素。

在這裏，我使用name屬性

var myButton = document.getElementsByName('dynamic'); 
 
var myInput = document.getElementsByName('viewPass'); 
 
myButton.forEach(function(element, index){ 
 
    element.onclick = function(){ 
 
    'use strict'; 
 

 
     if (myInput[index].type == 'password') { 
 
      myInput[index].setAttribute('type', 'text'); 
 
      element.firstChild.textContent = 'Hide'; 
 
      element.firstChild.className = ""; 
 

 
     } else { 
 
      myInput[index].setAttribute('type', 'password'); 
 
      element.firstChild.textContent = ''; 
 
      element.firstChild.className = "glyphicon glyphicon-eye-open"; 
 
     } 
 
    } 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<td data-title="Password"> 
 
<input name="viewPass" type="password" value="abcd" readonly/></td> 
 

 

 
<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button> 
 
<br> 
 
<td data-title="Password"> 
 
<input name="viewPass" type="password" value="watha" readonly/></td> 
 

 
<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button> 
 
<br> 
 

 
<td data-title="Password"> 
 
<input name="viewPass" type="password" value="xyz" readonly/></td> 
 

 
<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>

來源

2017-05-07 10:35:42

是的。但它不適用於下一個條目。 –

你是什麼意思下一個條目？其只讀文本框？ –

下一行。它只適用於第一行，但在下一行，該按鈕不起作用。 –

基本上你需要更新的元素，以便下一次您可以檢查是否顯示或隱藏它。您可以使用自定義屬性狀態。

var myButton = document.getElementById('viewPswd'), 
    myInput = document.getElementById('viewPass'); 
    myButton.onclick = function() { 

     'use strict'; 
      if(this.getAttribute('state') == 'hidden'){ 
      myInput.setAttribute('type', 'text'); 
      this.textContent = 'Hide'; 
      this.setAttribute('state', 'shown'); 

     } else { 
      myInput.setAttribute('type', 'password'); 
        this.setAttribute('state', 'hidden'); 
      this.textContent = 'Show'; 
     } 
    }

PFB爲你工作，例如：https://jsfiddle.net/8mfhpy2q/

請注意，這會爲每個頁面一個鍵上班，我們在這裏使用ID屬性。如果有多個密碼字段和按鈕，則會有所不同。

來源

2017-05-07 10:33:07

如何查看和隱藏表中所有行的密碼

回答

相關問題