1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="width: 60px; margin: 0 auto">
  9.         <input id='i1' type="text" value="请输入内容" onfocus="Focus()" onblur="Blur()">
  10.  
  11.     </div>
  12.     <script>
  13.         function Focus() {
  14.             tag = document.getElementById('i1');
  15.             val = tag.value;
  16.             if (val == '请输入内容') {
  17.                 tag.value = '';
  18.  
  19.             }
  20.         }
  21.         function Blur() {
  22.             tag = document.getElementById('i1');
  23.             val = tag.value;
  24.             if (val.length==0){
  25.                 tag.value = '请输入内容';
  26.             }
  27.  
  28.         }
  29.  
  30.     </script>
  31. </body>
  32. </html>

搜索框请输入关键字 onfocus 和 onblur的更多相关文章

  1. 两种方法实现text输入框中“请输入关键字”的提醒

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backd ...

  3. 在BootStrap的modal中使用Select2搜索框无法输入

    用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...

  4. select2的搜索框不能输入搜索内容

    按照select2官网配置完后,搜索框弹出后无法输入内容,究竟怎么回事,于是在其他页面尝试了select2,发现可以啊,为什么在这个地方不可以,终于找到了造成这个问题的不同之处:select2在模态对 ...

  5. 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  6. Bootstrap 模态框 select2搜索框无法输入

    去掉模态框的div中的 tabindex="-1" 这个属性 <div class="modal fade" role="dialog" ...

  7. vue-搜索功能-实时监听搜索框的输入，N毫秒请求一次数据

    <template> <div class="search-box"> <input class="box" :placehold ...

  8. Dom实例：数据自增、搜索框及跑马灯

    数据自增 功能:当点击add按扭后,div标签中的数据自动+1,实现网页的动态化 <!DOCTYPE html> <html lang="en"> < ...

  9. 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

随机推荐

  1. CentOS 6.5安装和配置ngix

    一.安装配置ngix 这里用wget直接拉取并安装资源文件 首先安装必要的库(nginx 中gzip模块需要 zlib 库,rewrite模块需要 pcre 库,ssl 功能需要openssl库). ...

  2. MyEclipse web jsp 如何调试

    MyEclipse如何调试 | 浏览:882 | 更新:2014-03-13 17:38 1 2 3 4 5 分步阅读 当程序写好之后,如何调试呢? 我们在MyEclipse中jav添加断点,运行de ...

  3. 新书《Cocos2dx 3.x 3D图形学渲染技术讲解》问世

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  4. python中多进程

    多进程 什么是进程 进程:正在进行的一个过程或者说一个任务,而负责执行任务的是CPU. 进程和程序的区别 程序仅仅是一堆代码而已,而进程指的是程序的运行过程. 举例 想象以为有着一手好厨艺的科学家肖亚 ...

  5. Qt UI界面改了,但UI界面不更新

    /**************************************************************************** * Qt UI界面改了,但UI界面不更新 * ...

  6. Mac Book Pro重新安装出错

    错误描述 未能创建用于apfs安装的预启动宗卷 解决 网上的经验: 返场重修 多试几次拼人品 多试了几次之后还是没用,选择U盘安装. 搞定! U盘安装教程

  7. /usr/include/c++/4.8/functional:1697:61: error: no type named ‘type’ in ‘class std::result_of<std::_Mem_fn<void

    /usr/include/c++/4.8/functional:1697:61: error: no type named ‘type’ in ‘class std::result_of<std ...

  8. centOS上安装MySQL5.7

    在centos上安装mysql,前提得有sudo的权限.没有的话先去跟管理员申请一个. STEP 1 - 安装MySQL 首先打开浏览器访问下 https://dev.mysql.com/downlo ...

  9. python3文件操作方法

    在python3中,我们可以使用open打开一个文件,那么打开文件后,文件有什么操作方法呢?接下来我就记录一下比较常用的方法. 1. close() 关闭打开的文件 2. fileno() 返回文件句 ...

  10. 认识hammer.js

    hammerjs是什么 hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势. hammerjs的两大优势如下: 为移动端网页添加相关手势. 去除移动端上的点击事件的300ms延迟 ...