html中的onfocus和onblur是什么属性?怎么使用?


本文摘自PHP中文网,作者青灯夜游,侵删。

html中的onfocus和onblur是什么属性?怎么使用?本篇文章就给大家介绍onfocus属性和onblur属性是什么,让大家了解onfocus属性和onblur属性的简单用法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们要知道onfocus和onblur都是html的事件属性,接下来简单介绍一下这两个属性。

1、onfocus事件属性

onfocus 属性在元素获得焦点时被触发,即:获得焦点事件;常用于 <input>、<select> 以及 <a>标签中。

注:onfocus 属性不适合用于以下元素中使用:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

2、onblur事件属性

onblur 属性在元素失去焦点时触发,即:失去焦点事件;常用于表单验证代码(例如用户离开表单字段)中。

说明:

1、onfocus 属性与 onblur 属性是相反的。

2、所有主流浏览器都支持 onfocus 属性和 onblur 属性。

下面我们通过简单的代码示例来介绍onfocus 属性和 onblur 属性的用法。

html onfocus 事件属性的用法

代码示例:当输入字段获得焦点时触发函数。此函数改变输入字段的背景色(黄色)

1

2

3

4

5

6

7

8

9

10

11

<script>

function setStyle(x){

   document.getElementById(x).style.background="yellow";

}

</script>

 

<div>

   <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>

   用户名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>

   密&nbsp;&nbsp;&nbsp;码: <input type="password" id="lname" onfocus="setStyle(this.id)">

</div>

效果图:

1.jpg

阅读剩余部分

相关阅读 >>

Html定位有几种方式

Html input标签的属性有哪些?input标签的name属性介绍

Html怎么让图片居中

Html button标签是什么意思?Html button标签的使用细节

Html怎么使文字加阴影

如何制作一个简单的Html登录页面(附代码)

asp.net怎么样获得Html标签值

Html如何关闭当前页面

Html如何进行换行

Html里的列表标签有哪些?

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...