javascript如何设置文本框输入时变颜色


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在javascript中,可以使用onfocus事件设置文本框输入时变颜色,只需要给元素绑定onfocus事件,再使用“对象.style.background="颜色值"”即可。onfocus事件在对象获得焦点时发生,通常用于表单中。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

动态设置文本框颜色:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

主要是利用javascript中的触发事件onfocus

<script language="javascript" type="text/javascript">

      <!--

         function myFocus(obj,color){

 

             //判断文本框中的内容是否是默认内容

 

 

             if(obj.value=="请输入收件人地址"){

               obj.value="";

             }

 

             //设置文本框获取焦点时候背景颜色变换

             obj.style.backgroundColor=color;

         }

 

 

         function myblur(obj,color){

 

             //当鼠标离开时候改变文本框背景颜色

             obj.style.background=color;

         }

 

  

 

在input标签中

 

<input type="text" name="username" id="username" onfocus="myFocus(this,'#f4eaf1')" onblur="myblur(this,'white')" value="请输入收件人地址"/>

 

用上述简单方法可以做到文本框背景颜色的变换和提示信息的清除

onfocus 事件在对象获得焦点时发生。Onfocus 通常用于 <input>, <select>, 和<a>.

提示: onfocus 事件的相反事件为 onblur 事件。

扩展资料:

onblur 事件会在对象失去焦点时发生。Onblur 经常用于Javascript验证代码,一般用于表单输入框。

语法

HTML 中:

1

<element onblur="SomeJavaScriptCode">

JavaScript 中:

1

object.onblur=function(){SomeJavaScriptCode};

【推荐学习:javascript高级教程

以上就是javascript如何设置文本框输入时变颜色的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript如何设置文本框输入时变颜色

更多相关阅读请进入《js改变字体颜色》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...