zoukankan      html  css  js  c++  java
  • jQuery插件文本框得到和失去焦点插件

     程序代码

    /*
    * jQuery.focusInput
    * CssRain.cn 2008-12-17
    * jQuery 插件 : 文本框得到焦点,失去焦点.
    */
    jQuery.fn.extend({
        "focusInput":function(){
            return this.each(function(){
                $(this).focus(function(){
                    if( $(this).val() == $(this).get(0).defaultValue ){
                        $(this).val("");
                    }
                });
                $(this).blur(function(){
                    if( $(this).val() == "" ){
                        $(this).val( $(this).get(0).defaultValue );
                    }
                })
            })
        }
    });


    用法:
     程序代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-1[1].2.6.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="jQuery.focusInput.js" charset="utf-8"></script>
        <script type="text/javascript">
        $(function(){
            $(".yourInput").focusInput();
        })
        </script>
    </head>
    <body>
        <input type="text" class="yourInput" value="abcd"/>
        <input type="text" class="yourInput" value="请输入用户名."/>
        <textarea type="text" class="yourInput" >请输入详细资料.</textarea>
    </body>
    </html>

    本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1203

  • 相关阅读:
    JDBC
    Oracle基本数据类型
    vue生命周期详解
    Vue的Ajax(vue-resource/axios)
    Vue实例属性/方法/生命周期
    Vue自定义指令
    深入了解组件- -- 动态组件 & 异步组件
    深入了解组件- -- 插槽
    深入了解组件- -- 自定义事件
    深入了解组件- -- Prop
  • 原文地址:https://www.cnblogs.com/luluping/p/1363502.html
Copyright © 2011-2022 走看看