事件：
onfous : 元素获取焦点时触发事件
onblur : 元素失去焦点时触发事件

方法：
obj.focus(); 可指定元素设置焦点
obj.blur(); 取消指定元素的焦点
obj.select(); 选中指定元素里面的文本内容

示例代码：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>焦点事件</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <script>

             window.onload = function(){

                var oIpt = document.getElementById("test");

                oIpt.focus();//自动获取焦点

                oIpt.select();//自动选中文本框里面的内容

                oIpt.onfocus = function(){

                    if(this.value == "请输入内容"){

                         this.value = "";

                    }

                }

                oIpt.onblur = function(){

                    if(this.value == ""){

                         this.value = "请输入内容";

                    }

                }

             }

         </script>

     </head>

     <body>

         <input type="text" name="test" value="请输入内容" id="test">

     </body>

 </html>

js学习笔记24----焦点事件的更多相关文章

  1. Js学习笔记一(鼠标事件.....)

    1.encodeURI与decodeURI()转化url为有效的url(能被识别) Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui& ...

  2. js学习笔记27----键盘事件

    键盘事件主要有2个: onkeydown : 键盘按下时触发,如果按下不抬起,那么会连续触发.   onkeyup : 键盘弹起时触发   不是所有元素都能接收键盘事件,只有能够响应用户输入的元素,换 ...

  3. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  4. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  6. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  7. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  8. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  9. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. 微信小程序 - 输入起点、终点获取距离并且进行路线规划（腾讯地图）

    更新: 2018-9-19 腾讯官方经纬度转详细地址,详细地址转经纬度 index.wxml <!--地图容器--> <map id="myMap" style= ...

  2. iOS7 UIKit动力学-重力特性UIGravityBehavior

    续文 在iOS7中事实上新加了非常多新的特性.之前看过,也了解过一些新的内容.如新的动力学特性,TextKit的图文混排,还有自己定义的动画跳转等.那段时间也比較忙,没时间整理.如今项目也弄完了,打算 ...

  3. cocos2d-x eclipse + NDK 自动编译配置

    文章来自:http://www.cocos2dres.com/view.asp?id=90 1. 准备工作: android NDK    r8版本 ADT Bundle 下载地址:http://de ...

  4. Percona Toolkit工具集介绍

    部署mysql工具是一个非常重要的部分,所以工具的可靠性和很好的设计非常重要.percona toolkit是一个有30多个mysql工具的工具箱.兼容mysql,percona server,mar ...

  5. 使用samba实现linux与windows文件共享

                       1,安装samba                              sudo apt-get install samba                 ...

  6. JS应用（资料很全）

    http://www.cnblogs.com/meil/archive/2007/02/06/642559.html 如果你找的javascript的东西的话,建议你 ctrl+F  直接在这个页上找 ...

  7. 调用Android自带日历功能

    Android手机配备有一个内置的日历应用程序.第三方应用程序可以利用日历内容提供商接口读取用户的日历信息和安排在日历新的事件.这个日历可以直接同步用户的谷歌日历. 不幸的是,没有文档和Android ...

  8. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  9. 【Android UI设计与开发】使用ViewPager实现欢迎引导页面

    一.实现的效果图 每次看别人的代码前,必需要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似.有图才有真相嘛,同一时候,最下方有源代码的下载地址,差点儿源代码的每一行都有凝视,写 ...

  10. 搜狐畅游CEO王滔辞职

    凤凰科技讯 11月3日消息,搜狐公布公告确认搜狐畅游CEO离职.公告称王滔因个人原因辞去畅游首席运行官职务.将继续担任畅游公司董事和首席产品官. 据搜狐公告,董事会任命搜狐总裁余楚媛与畅游总裁陈德文为 ...