Password field default value

前端未结

关注

 7  2301

How can I both use the HTML password input and set a text default value that will be readable since the password input will turn the characters into dots or stars? Can I do

相关标签:

7条回答

粉色の甜心

2021-01-06 09:41

<input type="password" name="x" id="x" value="some value" onclick="alert(this.value);" />

0 讨论(0)

夕颜

2021-01-06 09:43
Much easier option using ONLY HTML:

Add this code:

onfocus="this.value='', this.type='password'"

to the input field and make sure the type is initially set to text

Example:
```
input onfocus="this.value='', this.type='password'" value="Password" type="text" title="Password" id="password_field" name="signin_password"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

轮回少年

2021-01-06 09:46

So if I understand correctly, you want it to read "password" or whatever in regular letters until someone clicks on it, at which point it will turn blank, and anything typed in there will become *'s? Ok what you want is this:

in head:

<script type="text/javascript">
    function changefield(){
        document.getElementById("passwordbox").innerHTML = "<input id=\"password-field\" type=\"password\" name=\"password-field\" title=\"Password\" />";
        document.getElementById("password-field").focus();
    }
</script>

in the body:

<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password" onfocus="changefield();" value="password" />
</div>

0 讨论(0)

傲寒

2021-01-06 09:55
You could simply use the placeholder attribute:
```
<input type="password" value="" placeholder="Insert your password..."/>
```
This way, as soon as the user starts typing, the suggestion would go automatically away.
0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2021-01-06 09:56

Try this javascript it will sure help you...

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Watermark Textbox for Password Textbox Using JavaScript</title>
<script language="javascript" type="text/javascript">
function WaterMark(objtxt, event) {
var defaultText = "Enter Username Here";
var defaultpwdText = "Enter Password Here";
// Condition to check textbox length and event type
if (objtxt.id == "txtUserName" || objtxt.id == "txtPwd") {
if (objtxt.value.length == 0 & event.type == "blur") {
//if condition true then setting text color and default text in textbox
if (objtxt.id == "txtUserName") {
objtxt.style.color = "Gray";
objtxt.value = defaultText;
}
if (objtxt.id == "txtPwd") {
document.getElementById("<%= txtTempPwd.ClientID %>").style.display = "block";
objtxt.style.display = "none";
}
}
}
// Condition to check textbox value and event type
if ((objtxt.value == defaultText || objtxt.value == defaultpwdText) & event.type == "focus") {
if (objtxt.id == "txtUserName") {
objtxt.style.color = "black";
objtxt.value = "";
}
if (objtxt.id == "txtTempPwd") {
objtxt.style.display = "none";
document.getElementById("<%= txtPwd.ClientID %>").style.display = "";
document.getElementById("<%= txtPwd.ClientID %>").focus();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><b>UserName:</b></td>
<td>
<asp:TextBox ID="txtUserName" runat="server" Text="Enter Username Here" Width="150px" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" />
</td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<asp:TextBox ID="txtTempPwd" Text="Enter Password Here" runat="server" onfocus="WaterMark(this, event);" Width="150px" ForeColor="Gray" />
<asp:TextBox ID="txtPwd" TextMode="Password" Text="Enter Password Here" runat="server" Width="150px" Style="display:none" onblur="WaterMark(this, event);"/>
</td>
</tr>
</table>
</form>
</body>
</html>

0 讨论(0)

鱼传尺愫

2021-01-06 09:57

In head:

    function Changetxt() {
        if ($('#pwd').val() == "Enter Your Password Here") {
            $('#pwd').val('');
            $('#pwd').css('color', 'black');
        }
    }

    function textboxtype() {
        if ($('#pwd').val().length < 1) {
            $('#pwd').val('Enter Your Password Here');
            $('#pwd').css('color', 'gray');
        }
    }

In body:

<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'"
                            onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" />

0 讨论(0)

1 2 下一页