A-A+

input 输入框获得/失去焦点时隐藏与显示文字

2016年02月19日 web前端设计 评论 2 条 阅读 8 views 次

一个基于jquery与js的input 输入框获得/失去焦点时隐藏与显示文字程序代码。有需要的朋友可参考参考。

js中实现方法,代码如下:

  1. <input type="text" value="不推荐这么做" onfocus="if(this.value == '不推荐这么做') this.value = ''" onblur="if(this.value == '') this.value = '不推荐这么做'" />  

jquery方法,代码如下:

  1. <!DOCTYPE HTML>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.  <meta charset="UTF-8" />  
  5.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  6.  <script type="text/javascript">  
  7.   $(function() {  
  8.    var inputEl = $('#input_test'),  
  9.     defVal = inputEl.val();  
  10.    inputEl.bind({  
  11.     focus: function() {  
  12.      var _this = $(this);  
  13.      if (_this.val() == defVal) {  
  14.       _this.val('');  
  15.      }  
  16.     },  
  17.     blur: function() {  
  18.      var _this = $(this);  
  19.      if (_this.val() == '') {  
  20.       _this.val(defVal);  
  21.      }  
  22.     }  
  23.    });  
  24.   })  
  25.  </script>  
  26.  <title>input 输入框获得/失去焦点时隐藏/显示文字</title>  
  27. </head>  
  28. <body>  
  29.  <input type="text" id="input_test" value="input 提示测试" />  
  30. </body>  
  31. </html>  
标签:

2 条留言  访客:2 条  博主:0 条

  1. 每天签到赚10元

    非常好。。。

  2. 工业铝型材

    不错哦。。非常好。。。

给我留言