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>
时间： 2024-10-11 20:34:50

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

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)_jquery

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

Js控制iphone端的input/textarea元素失去焦点时隐藏键盘

同事在制作触屏页面的时候收到产品这样一个需求:"我们的页面为什么点击完textarea框,在点空白处时,iphone的键盘不能隐藏?" 我们就这个问题进行了测试,确实没有隐藏.看了看其它网站的页面,也是有的能隐藏有的不能隐藏. IPHONE系统在点击document时textarea为什么没有失去焦点? 同样的问题我又在Android系统上测试了一下可以自动隐藏,只有IPHONE有这问题. 于是上网搜了搜相关的方法显示隐藏键盘的方法都是基于APP的而没有js的,看来需要自己动手解决了.

Bootstrap实现input控件失去焦点时验证_javascript技巧

事实上,这是对应的"剪切"下来,然后"粘贴"到你的控件,请参见下面的代码的位置,所谓的透明背景图片: CClientDC CLDC(的getParent()); 的CRect矩形; 的CRect rect1; GetClientRect(RECT); GetWindowRect(rect1); 的getParent() - > ScreenToClient(rect1);如果 (m_dcBk.m_hDC == NULL){ m_dcBk.CreateCompa

Word2007如何隐藏和显示文字

Word2007如何隐藏和显示文字   隐藏文字 1.选中要隐藏的文字,然后单击鼠标右键,在弹出的快捷菜单中选择"字体"选项. 2.弹出"字体"对话框,在效果中勾选"隐藏",然后单击"确定"按钮即可. 3.回到Word文档,大家可以看到我们之前选中的文字已经被隐藏起来了. 显示文字 1.选中隐藏文字左右两侧的文字(或者是整篇文档),单击鼠标右键,选择"字体"项. 2.将效果中"隐藏"前的

Word2003中应该如何隐藏和显示文字

Word2003中应该如何隐藏和显示文字 .  隐藏文字 1.选中要隐藏的文字,然后单击"格式"菜单中的"字体"命令. 2.弹出"字体"对话框,在效果中勾选"隐藏文字",然后单击"确定"按钮即可. 3.回到Word文档,大家可以看到我们之前选中的文字已经被隐藏起来了. 显示文字 1.选中隐藏文字左右两侧的文字(或者是整篇文档),单击鼠标右键,选择"字体"项. 2.将效果中"隐藏

word字体隐藏功能如何隐藏及显示文字

  一.word2003隐藏及显示字体 我们打开word2003,进入到操作界面,然后将你的文档打开,选中你需要隐藏不需要的打印的文字,然后点击菜单栏上的"格式--字体",在字体的对话框下面"效果"上面勾选"隐藏文字",这样在去打印即可不会将你不需要打印的文字打印出来.如图所示: 比如我们打印之后,又需要这些文本恢复回来,这里就教大家如何恢复word文档中的被隐藏的文字,直接鼠标点击"工具--选项--视图",在视图下面的格式标

Android的ImageButton当显示Drawable图片时就不显示文字_Android

很多人对 Android提供的ImageButton有个疑问,当显示Drawable图片时就不会再显示文字了,其实解决的方法有三种: 第一种:就是图片中就写入文字,但是这样解决会增加程序体积,同时硬编码方式会影响多国语言的发布. 第二种:解决方法很简单,通过分析可以看到ImageButton的 layout,我们可以直接直接继承,添加一个TextView,对齐方式为右侧即可实现ImageButton支持文字右侧显示. 第三种:更简洁效率的方法:使用Button ,然后设定Button 的 and

输入框获得和失去焦点时隐藏/显示文字 新颖实现

Java代码   <!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>   <meta http-equiv

去除android浏览器中a、input获得焦点时的高亮边框

a,input等元素在android原生浏览器下获得焦点时,元素外围会出现一个橙色的高亮边框(如下图). 若要去除它,通常的办法是:  代码如下 复制代码 a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); } 不过看起来,这种方案在android 4.0以上版本的浏览器中是无效的.已知的一种在android 4.0以上版本浏览器中可以移除高亮边框的办法是:  代码如下 复制代码 a:focus,input:focus{