详解HTML onfocus获得焦点和onblur失去焦点事件_HTML/Xhtml

上一篇: HTML中两个tabs导航冲突问题的解... 下一篇:DIV的失去焦点(blur)实现方法

详解HTML onfocus获得焦点和onblur失去焦点事件

发布时间：2022-04-12 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

HTML onfocus 事件属性

定义和用法

onfocus 属性在元素获得焦点时触发。

onfocus 常用于 <input>、<select> 以及 <a>.

提示：onfocus 属性与 onblur 属性相反。

注释：onfocus 属性不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<;meta>、<param>、<script>、<style> 或 <tITle>。

实例

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

<script>
function setStyle(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>
 
<p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
 
First name: <input tyPE="text" id="fname" onfocus="setStyle(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="setStyle(this.id)">
 
</body>

HTML onblur 事件属性

定义和用法

onblur 属性在元素失去焦点时触发。

onblur 常用于表单验证代码（例如用户离开表单字段）。

实例

当用户离开输入字段时对其进行验证：

<script>
function upperCase()
{
VAR x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
 
<p>请输入您的姓名，然后把焦点移动到字段外：</p>
请输入您的姓名（英文字符）：<input type="text" name="fname" id="fname" onblur="upperCase()">
 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的详解HTML onfocus获得焦点和onblur失去焦点事件全部内容，希望文章能够帮你解决详解HTML onfocus获得焦点和onblur失去焦点事件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：HTML onfocus

上一篇: HTML中两个tabs导航冲突问题的解... 下一篇:DIV的失去焦点(blur)实现方法

猜你在找的HTML/Xhtml相关文章

了解HTTP Headers的方方面面图文说明 2022-04-12
Html分层的box-shadow效果的示例代码 2022-04-12
html+css实现血轮眼轮回眼特效代码 2022-04-12
html实现随机点名器的示例代码 2022-04-12
HTML中table表格拆分合并(colspan、rowspan) 2022-04-12
HTML页面滚动时部分内容位置固定不滚动的实现 2022-04-12
HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手 2022-04-12
HTML通过表单实现酒店筛选功能 2022-04-12
HTML中的表单Form实现居中效果 2022-04-12
HTML+CSS制作心跳特效的实现 2022-04-12