顯示3文本字符由8個字符的密碼格式

功能：顯示3文本字符由8個字符的密碼格式

用戶掃描ID與USB掃描器中，ID號（8個字符）被捕獲和值將被輸入到<input type=password>字段。但是，並不是顯示捕獲的ID值的全部8個項目符號點，只有5個字符將是密碼類型，其餘3個將以文本格式顯示。

問題：

我曾嘗試在網上搜索，但似乎無法找到任何可能的建議或解決方案。我已將輸入字段類型設置爲密碼，因此此時字段中的所有值均爲密碼類型格式。

但是，我想實現的是前5個字符遵循密碼類型格式，而其餘3個是文本類型格式。

我現在正在實現：

........

我要達成什麼目的：

..... 12A

我想請求幫助或指出我的方向，以便我可以做到這一點。

謝謝。

<input type="password" id= "NRICCodeField" style="position:absolute; top:545px; left:690px; height:68px; width:545px; outline: 0; border: 0; font-size:70px; font-color:#765725; font-family:'Gothic'; background: transparent; z-index:100;" autofocus src="lib/image/transparent.png">

來源

2016-12-15 Luke

您將無法使用密碼字段。這將永遠隱藏所有角色。你會想用'type =「text」'我想象和實現你自己的隱藏 – Liam

你是否願意使用JavaScript？順便說一句，你不能完全用'input type =「text」來實現它' – 31piy

我會看到這個最簡單的方法是讓兩個輸入相鄰，一個密碼和一個文本，當第一個密碼和一個文本跳到第二個一個有5個字符。爲了使它看起來不錯，你可以使輸入的寬度隨輸入字符的數量而變化。 – nicovank

我找到了你的方法，你可以在下面查看我的代碼，如果它適合你。您需要一個代理隱藏字段，您應該在其中存儲實際值，並且文本字段將僅出現在用戶視圖中。當表單被提交時，你應該從隱藏的字段而不是文本字段中選擇數據。

<!DOCTYPE html> 
<html class="not-ie" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>41160278</title> 
<script type="text/javascript"> 
function applyFormat(self){ 

    var input = self.value; 
    var firstPart = input.substr(0,4); 
    var lastPart = input.substr(5, input.length); 

    formname.forShow.value = firstPart.replace(firstPart, '*****') + lastPart; 

    formname.forStore.value = input; 

} 
</script> 
</head> 

<body> 
<form action="#" name="formname"> 
    <fieldset> 
     <input type="text" name="forShow" maxlength="8" onchange="applyFormat(this)" value="" /> 
     <input type="hidden" name="forStore" value="" /> 
    </fieldset> 
</form> 
</body> 
</html>

來源

2016-12-15 10:15:40 Hanif

這可能做的伎倆：

$(document).ready(function(){ 
 
    // Edit these if you want to switch to another character 
 
    // and/or the number of characters you want to hide 
 
    var unicodeChar = "●", hideNChars = 5; 
 

 
    // On text input, we turn the hidden characters into their real 
 
    // values, save into data("passcode") and then re-hide the 'n' 
 
    // first characters 
 
    $('#userID').on('input', function(){ 
 
    var regex = new RegExp(unicodeChar, "g"); 
 
    for (var i = 0, v; match = regex.exec($(this).val()); i++) { 
 
     v = $(this).val(); 
 
     $(this).val(v.substr(0, match['index']) + $(this).data("passcode")[i] + v.substr(match['index'] + 1)); 
 
    } 
 
    var value = $(this).val(); 
 
    $(this).data("passcode", value).val(Array(value.length <= hideNChars ? value.length + 1 : hideNChars + 1).join(unicodeChar) + value.substr(hideNChars)); 
 

 
    console.log($(this).data("passcode")); 
 
    }).data("passcode", ""); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="" id="userID">

的值是$('#userID').data('passcode')檢索，但如果需要的話，你可以存儲數據在一個隱藏的輸入或直接將輸入文本清晰的表單提交。

如果需要，可以輕鬆改進此代碼並使其更復雜。（例如，您可能需要知道用戶試圖刪除/替換的隱藏字符是什麼）

來源

2016-12-15 10:17:06 H4ris

顯示3文本字符由8個字符的密碼格式

回答

相關問題