鼠标点击输入框文字消失怎么办

2017-05-27

当我们对鼠标进行特效装饰的时候,却发现鼠标点击输入框文字就消失了怎么办?下面是小编为大家介绍鼠标点击输入框文字消失的解决方法,欢迎大家阅读。

鼠标点击输入框文字消失的解决方法

11.我们在充值缴费的时候,或者输入用户名密码的时候,经常会见到如下的提示框

22.当你的鼠标点击在“手机号码输入框”中的时候,输入框中的“请输入手机号码”文字消失,取代的是鼠标中的光标

3.此特效是如何实现的呢?看下如下的代码

4.把此代码拷贝到 dreamwerver 的body标签中间,并预览,在浏览器中的效果如下

5.把鼠标点击进入输入框,文字消失

6.现在解释下这段代码的意思

首先,是一个文本框html标签

value="请输入手机号码" -- 代表文本框中显示的内容是“请输入手机号码”

7.onblur="if(this.value =='') {this.value = '请输入手机号码'}"

-- onblur:官方标准解释是:事件会在对象失去焦点时发生 。

也就是说当你的鼠标焦点离开文本框的时候执行后边的代码。

后边的代码是个if条件语句,翻译过来的意思就是,当这个文本框的值等于空的时候执行大括号里的代码。

大括号里的代码翻译过来是 给文本框赋值“请输入手机号码”。

整体代码实现的效果就是,当你鼠标离开的时候,文本框重新填充内容“请输入手机号码”

8.onfocus="if(this.value == '请输入手机号码'){ this.value = '';this.style.color='#737e73';}"

--onfocus:官方标准解释:事件在对象获得焦点时发生。

也就是说,当你的鼠标点击进入文本框时,执行后边的代码。

后边的代码也是个if语句,翻译过来的意思就是,当文本框的值是“请输入手机号码”的时候,执行后边大括号里的代码。

大括号里的代码翻译过来就是 给文本框赋值为空,也就是清空文本框的内容,并且把文本框里的颜色赋值为#737e73。

整体代码实现的效果就是,当你鼠标点击进入文本框的时候,文本框的内容“请输入手机号码”消失,并且光标的颜色变为#737e73。

9.name="phoneNum" maxlength="11"

--此代码是定义文本框的名字是"phoneNum" 是要在form表单提示的时候用到,这里可以忽略

--maxlength 是定义文本框只能输入11个字符,因为电话号码是只有11位,所以定义他的最大输入长度

10.理解一下上边的代码,把this.style.color='#737e73' 修改为 this.style.color='#ff0000'

11.在浏览器中的效果是什么样子的?没错,当你鼠标点击进入的时候,光标变为了红色

12.当你鼠标离开的时候,文字也变成了红色

鼠标点击输入框文字消失怎么办相关文章:

1.jQuery实现鼠标单击网页文字后在文本框显示

2.如何解决鼠标无法选中文字

3.ppt怎样设置单击后显示的动画你知道在ppt里怎样设置通过点击...

4.没有鼠标如何启动wps文字

5.cad怎么在标题栏中输入文字

6.CAD输入文字时如何修改输入框

7.怎么实现css实现鼠标滑过改变文字

更多相关阅读

最新发布的文章