往往在做网页的时候会遇到要对一些表单控件做一些定制的背景渲染，下面一些关于文本框的onBlur和onfocus事件。此Demo是实现了当文本框获得焦点的时候输入背景为“黄色”，当文本框失去焦点的时候输入背景为“白色”。
onBlur事件：onBlur事件是当光标离开文本框中时发生的事件。
onfocus事件：onfocus事件在对象获得焦点时发生的事件。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//获得焦点输入背景设置为黄色
function setStyle(x)
{
document.getElementByIdx_x(x).style.background="yellow"
}
//失去焦点输入背景重置为白色
function recoveryStyle(y)
{
document.getElementByIdx_x(y).style.background="White"
}
</script>
</head>
<body>
First Name: <input type="text"
onfocus="setStyle(this.id)" id="fname" onBlur="recoveryStyle(this.id)" />
<br />
Last Name: <input type="text"
onfocus="setStyle(this.id)" id="lname" onBlur="recoveryStyle(this.id)"/>
</body>
</html>
分享到：
相关推荐
JavaScript onblur与onfocus事件详解 html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和...
本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。 一. onfocus（获得焦点事件） 当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用...
JavaScript的onfocus与onblur用法文章资源下载，供练习使用
JS：onfocus和onblur 事件应用举例
下面小编就为大家带来一篇老生常谈onBlur事件与onfocus事件(js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
OnFocus与OnBlur的例子，大家可以运行下，看下区别。
可以用在文本框中的onmousedown事件中，但推荐用在 onfocus事件中，若使用的onmousedown的话，则按键盘上摸拟右键的按键(在右win键右边)不响应；若用onfocus事件，则能顺利响应。 最后，当该文本框失去焦点时，需...
onfocus 事件在对象获得焦点时发生。onkeydown 事件会在用户按下一个键盘按键时发生。onkeypress 事件会在键盘按键被按下并释放一个键时发生。onkeyup 事件会在键盘按键被松开时发生。onmousedown 事件会在鼠标按键...
Form事件，由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：常用的为onblur、onfocus、onselect、onsubmit。 c. keybord事件 d.Mouse事件，由鼠标或类似用户动作触发的...
因为这两个参数以前很少遇到,baidu 一下明白了，onblur 是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名 <!DOCTYPE ...
差异性您可以在下面找到与原始库的主要区别的列表： 重构并改进了现有的代码库： 添加了onBlur和onFocus标签事件，以伴随onMouseOut和onMouseOver 将所有相应的属性从EnchantedSwitch移至Checkbox和Radio组件，并...
很好用的富文本编辑器wangEditor,设置内容、获取内容、上传图片、使用 AMD 加载、使用 textarea、onblur、onfocus、onchange、获取 JSON、配置表情、多语言、CSS-Reset
很好用的富文本编辑器wangEditor,设置内容、获取内容、上传图片、使用 AMD 加载、使用 textarea、onblur、onfocus、onchange、获取 JSON、配置表情、多语言、CSS-Reset
5.onFocus事件：光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时，产生该事件。 6.onChange事件：文本框的value值发生改变时调用函数。当利用text或textarea元素输入字符值改变时发该事件...
JavaScript+jQuery 网页特效设计 ...当文本框(包括和中的文本被选中的时触发) scroll() 当滚动条发生变化时触发 resize() 当调整浏览器窗口大小时触发 2、事件的绑定 bind() 方法：可以向被选元素添加一个或多