动态设置文本框颜色：

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

<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="请输入收件人地址"/>

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

———————————————————————————————————————————————————————————————————

动态设置字体颜色

<html>  

<body>

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

function test(obj)

{

    if( obj.value!="test" ){

        document.getElementById("inputbox").className= "input_s1";

    }else{

        document.getElementById("inputbox").className = "input_s2";

    }

}

</script>

<style>

  .input_s1 {font-size:20;color:red; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

  .input_s2 {font-size:20;color:black; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

 </style>

<center>  

<br>

<form method="get" action="returnpage.php" >

<input id="inputbox" type='text' class="input_s1"  value="test"  maxlength='300' size='40'  name='qw' onclick="test(this)"/>

<input type="submit" value="搜一下">

<br>

</center>

</body>

</html>

—————————————————————————————————————————————————————————————————

自己修改的一个，功能：文本框默认字体浅色，获取焦点时候清空文本框，输入文字变黑色，失去焦点判断文本框，重新回到浅色字体

function test(obj)

{

    if( obj.value!="CAS/NAME/CATALOG" ){

     document.getElementById("productParam").value="";

        document.getElementById("productParam").className="input_s2";

    }else{

     document.getElementById("productParam").value="";

        document.getElementById("productParam").className ="input_s2";

    }

}

function onBluet(obj){

 if(obj.value == ""){

  document.getElementById("productParam").value="CAS/NAME/CATALOG";

  document.getElementById("productParam").className ="input_s1";

 }else{

  document.getElementById("productParam").className ="input_s1";

 }

}

<style>

  .input_s1 {font-size:20;color:#949494; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

  .input_s2 {font-size:20;color:black; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

 </style>

<input class="input_s1" id="productParam" name="productParam" onkeyup="enterLogin(event);" type="text" value="CAS/NAME/CATALOG" onclick="test(this)" onblur="onBluet(this)"/></td>

js动态设置输入框字体/颜色的更多相关文章

  1. 设置placeholder字体颜色

    /*设置placeholder字体颜色*/::-webkit-input-placeholder{ color: #FFF;}:-ms-input-placeholder{ color: #FFF;} ...

  2. pycharm 如何设置函数调用字体颜色

    一.pycharm 如何设置函数调用字体颜色 1.打开pycharm编辑器,file > settings > editor > color scheme > python & ...

  3. js动态设置padding-top遇到的坑

    我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...

  4. poi生成excel整理(设置边框/字体/颜色/加粗/居中/)

    转: poi生成excel整理(设置边框/字体/颜色/加粗/居中/) 2016年12月02日 11:05:23 吃奶的牛 阅读数:34324   HSSFWorkbook wb = new HSSFW ...

  5. Android 设置TextView字体颜色

    设置TextView字体的颜色其实很简单,尤其是直接在XML文件中,可以直接通过textColor属性指定颜色值,达到设置文本颜色的效果:那在代码中如何动态设置字体的颜色值呢? 接下来,介绍如何通过J ...

  6. Dynamic CRM 2013学习笔记（二十八）用JS动态设置字段的change事件、必填、禁用以及可见

    我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设 ...

  7. js动态设置窗体位置

    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...

  8. python之设置控制台字体颜色

    # 设置控制台输出字体颜色 # 格式:\033[显示方式;前景色;背景色m # 采用终端默认设置:\033[0m # 红色字体 print('\033[1;31m') print('*' * 10) ...

  9. 【C#/WPF】Button按钮动态设置Background背景颜色

    学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...

随机推荐

  1. Android tcpdump抓包应用实现

    Android tcpdump抓包应用实现   Android应用很多时候都会涉及到网络,在请求网络出错时,我们可以通过抓包来分析网络请求,返回的数据等,通常我们是用tcpdump这个工具来抓包,再通 ...

  2. java中从含反斜杠路径截取文件名的方法

    例如:获取到的文件路径为C:\Documents and Settings\Leeo\My Documents\logo.gif现在想要取得图片的名称logo.gif,我们知道反斜杠“\”是转义字符, ...

  3. 解决BT5不能使用putty连接问题

    root@bt:~# cd /etc/sshroot@bt:/etc/ssh# sshd-generate Generating public/private rsa1 key pair.Your i ...

  4. 简单三段式状态机实验1-SOS

    一直想从一段式状态机切换到三段式状态机,从书上和网上不断搜寻三段式案例及方法,感觉很简单,就想拿之前做过的实验把一段式改成三段式,可是写起来并非那么简单,很棘手,改完后也没有成功,尤其状态机里面的计数 ...

  5. WebDriver(Selenium2) 常见异常及处理方法

    http://uniquepig.iteye.com/blog/1568197 Exception NoSuchElementException Solutions    1. Check the l ...

  6. Python中super的用法

    super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重复调用(钻石继承)等种种问题.总之前人留下的经验就是:保持一致性 ...

  7. C++ string 类重写

    (我们知道学习C++时,在学习完C的基础内容后最先上手的就是C++的string类来学习字符串处理的内容,这里我们通过重写string类来重新认识字符串处理的内容) 1.树立string类主要函数,确 ...

  8. STL优先队列的使用

    STL中有一个优先队列的容器可以使用. [头文件] queue 队列容器 vector 向量容器 [操作] 优先级队列支持的操作 q.empty()         如果队列为空,则返回true,否则 ...

  9. JS中的事件大全

    一般事件  onClick            鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick        鼠标双击事件 onMouseDown        鼠标上的按 ...

  10. ListView与RadioButton组合——自定义单选列表

      标签: radiobuttonlistviewandroidlayout 2013-09-10 11:13 19396人阅读 评论(8) 收藏 举报  分类: Android(19)  版权声明: ...