如何避免使用javascript在文本框中顯示提示文本

我正在使用簡單的登錄表單。我有兩個文本字段作爲用戶名和密碼。如何避免使用javascript在文本框中顯示提示文本

用戶名文本字段提示爲「用戶名」。

密碼文本字段提示爲「密碼」。

我想隱藏提示文本，同時單擊文本框內。

在這裏，我遇到兩個問題，

，如果我的用戶名文本中單擊對話框中的提示文本是隱藏。但是當我按Ctrl + Z然後再次提示出現，並能夠通過按鍵盤箭頭鍵進行編輯。
第二個是密碼文本字段類型是密碼。所以它不會顯示提示文字爲「密碼」。

這裏是我的代碼：

<html> 
<head> 
    <title>login</title> 
<script> 
function ForUserName() 
{ 
    if(document.getElementById('username').value == "user name") 
    { 
     document.getElementById('username').value=''; 
    } 
    else if(document.getElementById('username').value == '') 
    { 
     document.getElementById('username').value='user name'; 
    } 
} 

function ForPassword() 
{ 
    if(document.getElementById('password').value == "password") 
    { 
     document.getElementById('password').value=''; 
    } 
    else if(document.getElementById('password').value == '') 
    { 
     document.getElementById('password').value='password'; 
    } 
} 
</script> 

</head> 
<body> 

<input type="text" id="username" value="user name" onclick="ForUserName();" onblur="ForUserName();"> 
<input type="password" id="password" value="password" onclick="ForPassword();" onblur="ForPassword();"> 

</body> 
</html>

可以，我建議你的任何一個，請...

來源

2012-10-06 suresh.g

有一個HTML5屬性，做那個叫placeholder。所以，你只是做：

<input type="text" id="username" placeholder="user name">

而對於向後兼容性（舊的瀏覽器），你只要按照這個tutorial。

來源

2012-10-06 08:08:21

佔位符未在ie版本中工作 –

閱讀我的整個答案。我向你提供了一個向後兼容的教程，可以在任何**瀏覽器 –

是的..我的第一個問題解決了，感謝你。你可以給我一個密碼字段的解決方案 –

使用placeholder。你不需要任何JavaScript，所有最新的瀏覽器都支持它。 jsfiiddle

<input type="text" id="username" placeholder="user name" onclick="ForUserName();" onkeyup="ForUserName();">

來源

2012-10-06 08:07:54 Anoop

謝謝..但它只能在最新的瀏覽器工作 –

@ suresh.g肯定。你可以獲得很多佔位符插件（主要是jQuery）。 – Anoop

你可以使用HTML5 的佔位符屬性

<input type="text" id="username" placeholder="user name"> 
<input type="password" id="password" placeholder="password">

爲了支持舊的瀏覽器：

<input type="text" id="username" value="user name" onfocus="if (this.value == 'user name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'user name';}"> 
<input type="password" id="password" value="password" onfocus="if (this.value == 'password') {this.value = '';}" onblur="if (this.value == '') {this.value = 'password';}">

來源

2012-10-06 08:10:19 xdazz

如何避免使用javascript在文本框中顯示提示文本

回答

相關問題