• 技术文章 >web前端 >js教程

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

    醉折花枝作酒筹醉折花枝作酒筹2021-06-09 16:24:02原创68

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

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

    动态设置文本框颜色:

    主要是利用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 中:

    <element onblur="SomeJavaScriptCode">

    JavaScript 中:

    object.onblur=function(){SomeJavaScriptCode};

    【推荐学习:javascript高级教程

    以上就是javascript如何设置文本框输入时变颜色的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:js改变字体颜色
    上一篇:javaScript什么叫事件源 下一篇:javascript创建对象三种方法是什么
    第16期线上培训班

    相关文章推荐

    • 深入浅析Vuejs中的key值• 浅谈Nodejs如何进行多线程处理• 深入了解Nodejs中的mongoose工具• js如何添加css样式• jsp和html的区别有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网