思路:
1、首先用把密码框用txt暂时替代,并赋上默认值
<input
type="text"
value="请输入密码"
/>
2、当文本框获取焦点后,把默认值清空,把type改为password。
3、当文本框失去焦点后,把type改为txt,把默认值设为“请输入密码”。
JS代码:
window.onload=function(){
var
input=document.getElementById('input')
input.onfocus=function(){
if(this.value=='请输入密码'){
this.value=''
this.type='password'
}
}
input.onblur=function(){
if(!this.value){
this.type
=
'text'
this.value
=
'请输入密码'
}
}
}
HTML代码:
复制代码
代码如下:
<input
type="text"
value="请输入密码"
id="input"
/>
希望本文所述对大家JavaScript程序设计有所帮助。
所谓“输入焦点”,即当前用户按键操作所对应的目标对象。譬如:用户正在编辑框中输入文本,那么此编辑框就具有输入焦点,因为它将获得目前用户所进行的所有按键操作。所谓“获得”或者“失去”输入焦点,即当前用户按键操作所对应的目标对象发生转移。譬如:现在用户正在编辑框1中输入文本,突然使用鼠标或其它方法切换到了编辑框2上去继续输入。那么此时,编辑框1就“失去”了输入焦点,编辑框2就“得到”了输入焦点,因为在此以后用户所进行的所有按键操作都将被改为编辑框2所获得。<input type="text" placeholder="请输入" /> function isSupportPlaceHolder () {var test = document.createElement('input')
return ('placeholder' in test)
}
if(!isSupportPlaceHolder()) {
var input = document.getElementsByTagName('input')[0]
input.onfocus = function () {
if(this.value == this.getAttribute('placeholder')) {
this.value = ''
}
}
input.onblur = function () {
if(!this.value) {
this.value = this.getAttribute('placeholder')
}
input.blur()
}
}
html5中提供了placeholder属性来做这个事情,所以我们可以先考虑使用浏览器提供的方法。
如果不支持这个属性,那么用js来实现。