求把一段jquery程序改写成可调用的形式

$(function(){
  $(window).load(function(){
    $('input[type=text]').each(function(){
      var thisTitle = $(this).attr('title');
      if(!(thisTitle === '')){
        $(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
        $(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
        $('.placeholder').css({
          color:'#999',
          overflow:'hidden',
          position:'absolute'
         }).click(function(){
          $(this).prev().focus();
        });        $(this).focus(function(){
          $(this).next('span').css({display:'none'});
        });
      }
    });
  });
});想改上述程序，可调用
<input type="radio" name="chk" id="chk" value="1" onclick="调用上述程序">
<input type="text"  name="nam" id="nam" title="显示提示">

解决方案 »

  1.   


    $(function(){
      $(window).load(function(){
        $('input[type=text]').each(function(){
          var thisTitle = $(this).attr('title');
          if(!(thisTitle === '')){
            $(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
            $(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
            $('.placeholder').css({
              color:'#999',
              overflow:'hidden',
              position:'absolute'
             }).click(function(){
              $(this).prev().focus();
            });        $(this).focus(function(){
              $(this).next('span').css({display:'none'});
            });
          }
        });
      });
    });
      

  2.   

    本帖最后由 net_lover 于 2012-08-10 13:44:44 编辑
      

  3.   

    多谢net_lover老大！要想在「body的onLoad」和「radio的onClick」都能使用，
    可不可以做成一个公用的？
      

  4.   


    <head>
    <title>jQuery Placeholder</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
      $(window).load(function(){
        $('input[type=text],input[type=password],textarea').each(function(){
          var thisTitle = $(this).attr('title');
          if(!(thisTitle === '')){
            $(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
            $(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
            $('.placeholder').css({
              top:'4px',
              left:'5px',
              fontSize:'100%',
              lineHeight:'120%',
              textAlign:'left',
              color:'#999',
              overflow:'hidden',
              position:'absolute',
              zIndex:'99'
            }).click(function(){
              $(this).prev().focus();
            });        $(this).focus(function(){
              $(this).next('span').css({display:'none'});
            });        $(this).blur(function(){
              var thisVal = $(this).val();
              if(thisVal === ''){
                $(this).next('span').css({display:'inline-block'});
              } else {
                $(this).next('span').css({display:'none'});
              }
            });        var thisVal = $(this).val();
            if(thisVal === ''){
              $(this).next('span').css({display:'inline-block'});
            } else {
              $(this).next('span').css({display:'none'});
            }
          }
        });
      });
    });
    </script>
    </head><body>  <form action="">
        名字<input type="text" title="输名字" size="50">
        <br /><br />    密码<input type="password" title="输密码" size="50">
        <br /><br />    详细<br/>
        <textarea title="输详细" cols="50" rows="5"></textarea>
      </form></body>
    </html>
      

  5.   

    上述程序是模仿Html5的「Placeholder」。但在清空<input type="text">时，Placeholder（title）的内容不会再显示出来。想增加功能：清空<input type="text">时，提示再显示出来。谁帮的作一下，我会加分！
      

  6.   


    <head>
    <title>jQuery Placeholder</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
      $(window).load(function(){
        $('input[type=text],input[type=password],textarea').each(function(){
          var thisTitle = $(this).attr('title');
          if(!(thisTitle === '')){
            $(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
            $(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
            $('.placeholder').css({
              top:'4px',
              left:'5px',
              fontSize:'100%',
              lineHeight:'120%',
              textAlign:'left',
              color:'#999',
              overflow:'hidden',
              position:'absolute',
              zIndex:'99'
            }).click(function(){
              $(this).prev().focus();
            });        $(this).focus(function(){
              $(this).next('span').css({display:'none'});
            });        $(this).blur(function(){
              var thisVal = $(this).val();
              if(thisVal === ''){
                $(this).next('span').css({display:'inline-block'});
              } else {
                $(this).next('span').css({display:'none'});
              }
            }).keyup(function(){
           if($(this).val()==""){
           $(this).val("提示信息");
    }
    });        var thisVal = $(this).val();
            if(thisVal === ''){
              $(this).next('span').css({display:'inline-block'});
            } else {
              $(this).next('span').css({display:'none'});
            }
          }
        });
      });
    });
    </script>
    </head><body>  <form action="">
        名字<input type="text" title="输名字" size="50">
        <br /><br />    密码<input type="password" title="输密码" size="50">
        <br /><br />    详细<br/>
        <textarea title="输详细" cols="50" rows="5"></textarea>
      </form></body>
    </html>加了一个keyup时间 看是不是你要的效果？
      

  7.   

    $this.keyup 可以为何 $this.change 不可以？
     
      

  8.   

    $this.keyup 可以为何 $this.change 不可以？