JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

JavaScript022

JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果,第1张

本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果。分享给大家供大家参考,具体如下:

思路:

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程序设计有所帮助。

<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来实现。