Question

文本框中的文字格式如下：

login -u username -p password

在输入此文本时，我想将“密码”替换为等于其长度的“*”数。所以，如果我输入：

文本框中的

'login -u abc@abc.com -p abc'应显示如下：

login -u abc@abc.com -p ***

而且我还需要存储正在替换的实际密码。

有可能吗？提前谢谢

Answer 1

您可以使用多个文本框，并使其看起来像一个命令提示符。使用CSS可以删除左边框，右边框并将它们连接得足够近。在每个文本框的按键事件上，检查用户是否键入了空格并将焦点更改为下一个文本框。如果您有一些固定的输入格式，此解决方案可以正常工作。

Answer 2

您需要查看需求的方式需要进行更改。为什么需要通过一次输入从用户获取数据？

您需要以不同方式收集用户名和密码，然后您可以在表单提交上合并相同的内容。

$("#submit").click(function(){
    $output = "login -u " + $("#username").val() + " -p " + $("#password").val();
    alert($output);
    return false;
});

http://jsfiddle.net/kiranvarthi/j8gL9mvx/1/

Answer 3

您应该使用正则表达式解析输入值，即

<input type="text" id="inputText" />
<input type="hidden" id="actualPassword" /> <!-- Another element to store actual password -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// Function to repeat string n times */
var StringUtilities = {
    repeat: function(str, times) { 
       return (new Array(times + 1)).join(str);
    }
};
$(function(){
    $('#inputText').keyup(function(){ 
        var test = /(login[\s]+\-u[\s]+[a-zA-Z0-9@\.\s]+\-p[\s]+)(.*)/i.exec( $(this).val() ); //'login -u user123 -p password123'      
        if(test !== null)
        { 
            if( $('#actualPassword').val().length < $.trim(test[2]).length )
                $('#actualPassword').val( $('#actualPassword').val() + test[2].slice(-1) );
            else
                $('#actualPassword').val($('#actualPassword').val().slice(0, test[2].length));

          $(this).val( test[1] + StringUtilities.repeat( '*', test[2].length) );     
        }
    });
});
</script>

JS FIDDLE： http://jsfiddle.net/nmx04h1o/3/

Answer 4

不要这样做。您可以在我的答案底部看到我尝试过的内容。

我在这个问题上玩了一点点，但当我面对自己另一个问题。

有两种方法可以做到这一点。第一，当用户输入字符时，您需要使用keyup功能。

所以，你可以写一个正则表达式，正在捕捉-p andsomecharactersherewhileitsnotspace。

好的，第一种方法是捕获用户密码的最后一个字符，并将其转换为隐藏字段。我和Apul Gupta试了这个。

出于某种原因，我们的代码都搞乱了密码，因为出于某种原因，我不知道，如果你快速打字，会有*个字符。我试图替换那些*字符，但在这种情况下，密码中会丢失一些字符。

另一种方法是从keyup事件中获取角色。这很糟糕，因为String.fromCharCode总是返回大写字符，因为，keyup不知道，是否发生了SHIFT或CAPS LOCK。也许现在你想，你可以处理它，但你不能。 SHIFT很简单，但您不知道，CAPS LOCK是否已启用。

如果您只允许用户使用小写密码或仅使用大写密码，则解决方案可能就是这样，但这样做很糟糕，因为这会使密码变长。

所以，多想一点。让我们说，不知何故，我们可以使用其中一个解决方案。然后这整件事情变成了一件非常复杂的事情，我觉得这太贵了。因为，如果用户只是SHIFT, LEFT ARROW, DELETE密码，您应该处理，会发生什么。您需要检查，使用该keypers组合选择的内容，光标位置等等......

我建议你忘记这一点，或者尝试找另一种方法来做。

Kiran Varthis的回答是我认为最好的选择。

我尝试了什么：

<input type="text" name="userInput" id="userInput" value="" />
<input type="hidden" value="" name="hiddenPassword" id="hiddenPassword" />
<script type="text/javascript">
    $(function() {
        String.prototype.repeat = function(num) {
            return new Array(num + 1).join(this);
        }
        //46 = delete key
        $("#userInput").keyup(function(e) {
            var match = $("#userInput").val().match(/-p([\s]+)(.+)/i);
            if (e.keyCode === 8) {
                var deleted = $('#hiddenPassword').val().substring(0, $('#hiddenPassword').val().length - 1);
                $('#hiddenPassword').val(deleted);
            } else {
                if (match !== null && match[2] && String.fromCharCode(e.keyCode).match(/[a-zA-Z0-9]/)) {
                    //Alphanumeric
                    $('#hiddenPassword').val($('#hiddenPassword').val() + $("#userInput").val().substring($("#userInput").val().length - 1));
                    $("#userInput").val(($("#userInput").val().replace(/-p (.+)/, "-p " + "*".repeat(match[2].length))));
                }
            }
            if (match !== null && match[2]) {
                console.log("Password is: " + $('#hiddenPassword').val());
            }
        });
    });
</script>

在文本框中键入文本时替换文本框中的部分文本

4 个答案: