输入类型密码值？答案

【问题标题】：input type password value?输入类型密码值？
【发布时间】：2012-07-30 18:47:32
【问题描述】：

您好，我遇到以下问题：

我有两个输入字段。一个是登录用户名，即另一个是密码。现在我想设置这两个字段的值。我的问题是密码。我打算实现如下：

HTML：

<input 
type="text"
id="log_password" 
name="log_password" 
value="<?php echo ($log_password);?>" 
onfocus="if(this.value=='Password')this.value='';this.type='password'"
onblur="if(this.value=='') this.value=this.defaultValue;"/>

PHP：

$log_password = "Password";

if(isset($_POST['submit'])){

    $log_password = $_POST['log_password'];

        if(empty($log_password)){
            $errors['log_password'][]="No password given";
            $_POST['log_password'] = "Password";
            $log_password = $_POST['log_password'];
    }       
}

问题在于，这在提交表单之前一直有效。如果出现错误，由于type="text" 标签，密码再次可见。那么我该如何解决这个问题，如果有人可以帮助我，我真的很感激。非常感谢。

更新：

<div class="small2"> 
<?php if (!isset($errors['log_password'])):?>
<input 
type="<?= $passwordVal == "" ? "text" : "password" ?>" 
id="log_password" name="log_password" 
value="<?php echo ($log_password);?>" 
placeholder="Passwort" 
onfocus="if(this.value=='Passwort')this.value=''" 
onblur="if(this.value=='') this.value=this.defaultValue;"/>
<?php endif;?>

<?php if (isset($errors['log_password'])):?>
<input class="log-err" 
type="<?= $passwordVal == "" ? "text" : "password" ?>" 
id="log_password" name="log_password" 
value="<?php echo ($log_password);?>" 
placeholder="Passwort" 
onfocus="if(this.value=='Passwort')this.value=''" 
onblur="if(this.value=='') this.value=this.defaultValue;"/>
<?php endif;?>
</div>

【问题讨论】：

使用适当的<label> 元素。不要滥用value 属性。
@Quentin 我想指出，如果使用placeholder 属性，<label> 并不总是必要的。但是，建议每个<input> 都有一个与之对应的<label>。
@Matt — 来自规范：placeholder 属性不应用作标签的替代品。 和 placeholder 属性表示一个简短的提示（一个词或短语）旨在帮助用户输入数据。提示可以是示例值或预期格式的简要说明。
@Quentin +1 支持我。 :-)

标签： php javascript html forms input

【解决方案1】：

正如马特正确建议的那样，您可以使用 placeholder 标记。

但是要让占位符起作用，您不能设置“值”。解决方案当然是使用条件类型，或者使用 jQuery 框架。你可以做这样的事情..

<?
    $your_pass = 'bla-bla-bla';
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Test page</title>
        <!-- Load jQuery library from Google repository -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <form action="#">
            <input type="password" name="log_password" id="log_password" />
        </form>
    </body>
    <script>

        $(document).ready(function() {
            /* execute this by jQuery when document is ready */

            /* must use traditional javascript to change input's type attribute */
            document.getElementById('log_password').setAttribute('type', 'text');

            /* set empty value attribute of input with id "log_password" */
            $('input#log_password').attr('val','');

            /* set placeholder attribute */
            $('input#log_password').attr('placeholder','Password');

            $('input#log_password').focus(function(){
                /* when input with id log_password is focus.. */
                $(this).attr('placeholder','');

                /* set the value as you prefer... */
                $(this).val('<?=$your_pass?>');

                /* reset type of input to password */
                document.getElementById('log_password').setAttribute('type', 'password');
            });
        });
    </script>
</html>

【讨论】：

您好，我认为您的解决方案将是处理此问题的最佳方法。我以前从未使用过 jquery。你会那么友好，可以评论每一行吗？我仍然在寻找与 javascript 的相似之处，但我看不到函数将被调用的位置...... php 变量也无法理解。谢谢。
我添加了一些 cmets。请记住，这只是一个示例，用于向您展示如何通过 jQuery 来玩 DOM... 为了做您需要的事情，也许您必须将 php 和 jQuery 结合起来。您可以在jQuery official site 上找到手册和大量示例；相信我：它真的是一个简单的框架。最后一点：正如@Quentin 所说：不要滥用占位符标签！在这种情况下，最好只使用一个标签并将输入作为密码字段。

【解决方案2】：

使用

<input type="password" placeholder="Password" ... />

如果您必须将其用作文本字段（以显示“密码”），则应将输入类型设置为有条件的：

<?php
    // in case of error, the value that the user entered will be passed back via GET (POST?)
    $passwordVal = isset($_GET['log_password']) ? $_GET['log_password'] : "";
?>

<!-- if ($passwordVal) is an empty string, type is "text", else type is "password". -->
<input type="<?= $passwordVal == "" ? "text" : "password" ?>" ... />

【讨论】：

那么值的文本类型呢？这应该是可读的。
@bonny 密码不应该是可读的 - 它应该用星号混淆。 placeholder 属性将允许“密码”对用户可见，直到焦点被赋予该输入（只要它没有分配值）。
这不起作用。 value="password" 在加载页面时不可见
@bonny 在这种情况下，您使用的是不支持 HTML5 的旧浏览器；请改用<label>。
@Quentin：不是每个人都有能力“改变设计”。在一个完美的世界里，这是可能的，但有些人没有权力做出这些决定，不得不生活在高于他们的人的限制内。

【解决方案3】：

我认为，如果有错误，您需要将类型从“文本”更改为“密码”

【讨论】：

【解决方案4】：

编写你认为是函数的代码，然后通过加载页面、焦点事件和模糊事件调用它。 Matt 的解决方案很好，但我认为它仅限于支持 HTML5 的浏览器。

【讨论】：

我已经编辑了我的答案，以便非 html5 浏览器更容易访问。

【解决方案5】：

文档上的脚本如何准备检查 log_password 值是否为密码并更改类型。

抱歉，请参阅 deste 的帖子 +1

【讨论】：