在php中焦点事件,Js中的onblur和onfocus事件（图文教程）

html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。

一. onfocus(获得焦点事件)

当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用onfocus来实现。

以下的文本框，当鼠标指针移过去时，里面的文字全部被选中：

请输入网址

这是怎么做的呢？看以下代码及解释：

代码里，input标签内嵌入了onmousemove(鼠标指针经过)事件的JS语句，其等号后面的this.focus()意为其自身获得焦点；获得焦点的标志是该文本框内将出现输入光标，但要让其内的文字全部被选中，我们还得用上this.select()语句，它的意思就是选中全部文本框里的文字。

二. onblur(失去焦点事件)

我们经常会检测文本框是否已经被正确输入，检测工作通常在用户点击了提交按钮之后进行，事实上，利用控件失去焦点的时候，我们就可以实时进行这个检测工作，这样的话，onblur事件就派上用场了。

以下例子有四个文本框，如果还没有任何单击它们当中的任意一个的操作，那么什么事情也不会发生，但是，当你单击了其中的任何一个使其拥有了焦点(输入光标在里面)，如果什么都没有输入并且单击了别的地方令其失去焦点，就会弹出一个警告，试试看

姓名

性别

年龄

住址

以下是代码和解释：

表单代码

姓名

性别

年龄

住址

JS代码

function chkvalue(txt) {

if(txt.value=="") alert("文本框里必须填写内容!");

}

表单代码里，每一个方框框的代码都嵌入一个onblur JS语句，它们都调用后面的JS代码中的自定义函数chkvalue(this)，意思是，当文本框失去焦点时就调用chkvalue()函数；这chkvalue()函数检测文本框是否为空，如果是就弹出警告窗口。该函数有一个参数(txt)，对应于前面文本框调用该函数的参数(this)即自身。

上面是我整理给大家的，希望今后会对大家有帮助。

php中base64和js中base64可互相加解密
php中base64和js中base64可互相加解密前提:加解密的字符必须转换成UTF-8编码格式. php代码: <?php $str='中国航母辽宁号-歼15战机GOOD=ok'; ech ...
VM：如何向vmware虚拟机中传输文件(或者共享文件夹)之详细攻略(图文教程)
VM:如何向vmware虚拟机中传输文件(或者共享文件夹)之详细攻略(图文教程) 目录如何向vmware虚拟机中传输文件 1.外部点击安装VMware Tools 2.内部客户机进行安装 3.共享文 ...
如何修改作者名称_PS2019中如何扩展文本选区 ps扩展文本选区的图文教程_photoshop教程...
百度经验发布时间:2020-11-26 17:13:48 作者:twotwoyourfour 我要评论 PS2019中如何扩展文本选区?有时我们在制作文字里需要扩展文字的选区,下文中为大家带来了 ...
onBlur和onfocus事件
往往在做网页的时候会遇到要对一些表单控件做一些定制的背景渲染,下面一些关于文本框的onBlur和onfocus事件.此Demo是实现了当文本框获得焦点的时候输入背景为"黄色",当文 ...
python点击事件onclick_巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式onblur和onfocus事件window.onload解释小米商城讲解...
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
SQLAlchemy中模糊查询;JS中POST带参数跳转;JS获取url参数
SQLAlchemy中模糊查询,如何like多个关键字 JS中POST带参数跳转一个项目中要跳转到另外一个项目,还需要带参数考虑到安全性的问题,最好是用POST跳转,不能再URL中拼参所以找到了 ...
中getname_浅析JS中的class
前言在 ES6 规范中,引入了 class 的概念.使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代. 但是JS 中并没有一个真正的 class 原始类型, class ...
js在html中拆分字符串,js中的split方法 js用split()取字符串
本来想通过静态HTML传递参数,动态读取url0和url字段,试了一下没成功.定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separ ...
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: 1.width()方法用于获得元素内容所占的宽度: 2.innerWidth()方法用于获得包括内边界(padding)的元素宽度: 算式:innerWidth()=width()+ ...

在php中焦点事件,Js中的onblur和onfocus事件（图文教程）

在php中焦点事件,Js中的onblur和onfocus事件（图文教程）相关推荐

最新文章

热门文章