js动态设置输入框字体/颜色

最新推荐文章于 2024-04-25 10:51:54 发布

yy_2011

最新推荐文章于 2024-04-25 10:51:54 发布

阅读量2w

点赞数

分类专栏： js 文章标签： input javascript function class action c

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

动态设置文本框颜色：

主要是利用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" οnfοcus="myFocus(this,'#f4eaf1')" οnblur="myblur(this,'white')" value="请输入收件人地址"/>

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

转自：http://blog.sina.com.cn/s/blog_78c47a0d0100qiia.html

动态设置字体颜色

<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' οnclick="test(this)"/>
<input type="submit" value="搜一下">
<br>
</center>
</body>
</html>

转自：http://topic.csdn.net/u/20080804/19/dec089b3-59e5-481c-b5d8-b4e3c4949078.html

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

yy_2011

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js动态设置输入框字体/颜色

动态设置文本框颜色：主要是利用javascript中的触发事件onfocus和onblur <!-- function myFocus(obj,color){ //判断文本框中的内容是否是默认内容 if(obj.value=="请输入收件人地址"){ obj
复制链接

扫一扫