网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

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

js中实现方法

 代码如下 复制代码

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


jquery方法

 代码如下 复制代码

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
  $(function() {
   var inputEl = $('#input_test'),
    defVal = inputEl.val();
   inputEl.bind({
    focus: function() {
     var _this = $(this);
     if (_this.val() == defVal) {
      _this.val('');
     }
    },
    blur: function() {
     var _this = $(this);
     if (_this.val() == '') {
      _this.val(defVal);
     }
    }
   });
  })
 </script>
 <title>input 输入框获得/失去焦点时隐藏/显示文字</title>
</head>
<body>
 <input type="text" id="input_test" value="input 提示测试" />
</body>
</html>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论