`
jackroomage
  • 浏览: 1217778 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

HTML DOM focus()和blur()方法 输入框鼠标指过自动消失鼠标离开显示 js

 
阅读更多

http://blog.csdn.net/zyxlinux888/article/details/7391240

 

 

 

 

定义和用法

focus() 方法用于在密码域上设置焦点。

语法

passwordObject.focus()

实例

下面的例子可设置或移开密码域上的焦点:

<html>
<head>
<script type="text/javascript">
function setFocus()
  {
  document.getElementById('password1').focus()

  }
function loseFocus()
  {
  document.getElementById('password1').blur()

  }
</script>
</head>
<body>

<form>
<input type="password" id="password1" value="thgrt456" />
<input type="button" onclick="setFocus()" value="Set focus" />
<input type="button" onclick="loseFocus()" value="Lose focus" />
</form>

</body>
</html>
实例2:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>

<script type="text/javascript">
       function chg(){
       document.getElementById("setfocus").value="";
       }
       function newChg(){
       document.getElementById("setfocus").value="请输入关键字";
       }
</script>

</head>

<body>
<input type="text" name="name" size="15" class="input" id="setfocus" value="请输入关键字" onfocus="chg()" onblur="newChg()">

</body>
</html>

实例3

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>

<script type="text/javascript">
function $(ID) {return document.getElementById(ID);}
function chg(){
$("setfocus").value="";
}
function newChg(){
    if($("setfocus").value==""){
        $("setfocus").value="请输入关键字";
        }
    else{return $("setfocus").value }
}
</script>

</head>

<body>
<input type="text" name="name" size="15" class="input" id="setfocus" value="请输入关键字" onfocus="chg()" onblur="newChg()">

</body>
</html>
分享到:
评论

相关推荐

    jQuery focus和blur事件的应用详解

    其中,focus和blur事件是JavaScript中比较常用的两个事件,它们分别用于处理元素获得焦点和失去焦点的情况。在jQuery中,这两个事件的处理与原生JavaScript有所不同,因为jQuery提供了一套更加方便和强大的方法来...

    jquery插件-表单验证 根据focus blur

    `focus`事件在用户将焦点转移到某个元素(如输入框)时触发,而`blur`事件则在用户焦点离开该元素时触发。这个jQuery插件利用这两个事件来实现实时的表单验证,使用户在输入时就能立即看到他们的输入是否有效。 ...

    JS 仿支付宝input文本输入框放大组件

    在JavaScript(JS)开发中,有时我们需要实现一些高级交互效果,比如模仿知名应用的功能,例如支付宝的input文本输入框放大组件。这个组件在用户聚焦到输入框时,会将输入框放大,提供更好的用户体验,特别是在...

    jQuery表单获取和失去焦点输入框提示效果

    接着,我们引入jQuery库,并编写JavaScript代码来监听输入框的`focus`(获取焦点)和`blur`(失去焦点)事件。代码可能如下: ```javascript $(document).ready(function() { $("#inputField").focus(function() {...

    jquery focus(fn),blur(fn)方法实例代码

    根据给定文件的内容,我们看到的一个示例是使用了 .focus() 和 .blur() 方法来改变一个文本输入框获得和失去焦点时的样式。在代码中,首先定义了一个 CSS 类 .highlight,它将为元素添加边框和轮廓样式。随后,在 ...

    JQuery仿Div失去焦点和输入框切换的效果

    在这个案例中,JQuery主要用于监听`focus`和`blur`事件,即当用户将光标离开Div或输入框时触发`blur`事件,进入时触发`focus`事件。通过JQuery,我们可以方便地为Div和输入框添加事件监听器,实现动态效果。 4. **...

    原生js简易提示框 input 点击文字消失

    DOM(Document Object Model)是HTML和XML文档的结构化表示,通过JavaScript我们可以访问和修改页面上的元素。 1. **创建提示框**: 创建提示框首先需要在HTML中定义一个元素,比如`&lt;div&gt;`,作为提示框。可以为其...

    输入框灰色提示字体效果

    在非IE浏览器中,这段代码将展示一个输入框,其中显示“请输入您的姓名”,用户点击或聚焦输入框后,提示文字会自动消失。但在IE浏览器中,这个功能就需要通过JavaScript或其他方法来实现。 在这个名为“input框...

    用Html+Js实现的“自动补全”功能 (2).docx

    本示例主要讲解如何使用HTML和JavaScript来实现类似百度搜索框的自动补全功能。 首先,我们要理解自动补全功能的基本需求: 1. 当用户在输入框中输入字符时,系统应能自动匹配与输入相关的数据,并在界面上展示。 2...

    简单实用的jQuery表单输入框浮动标签动画特效插件

    2. **事件绑定**:插件监听输入框的`focus`和`blur`事件,当用户聚焦输入框时,触发浮动标签动画;失去焦点时,标签恢复原位。 3. **动画效果**:利用jQuery的`animate`方法,平滑地调整标签的位置和透明度,创造出...

    简单语句实现表单获取和失去焦点输入框提示效果

    接着,我们分别为输入框的`focus`(获取焦点)和`blur`(失去焦点)事件添加处理函数。当输入框获取焦点时,如果其值与占位符相同,就清空值并恢复字体颜色。而当输入框失去焦点且值为空时,我们将提示文字恢复并...

    基于jQuery的输入框无值自动显示指定数据的实现代码

    这个实现方式简单高效,通过jQuery的事件监听和DOM操作,实现了输入框无值时自动显示指定数据的效果。用户在输入框内输入内容后,提示文本会消失,而当输入框为空或仅包含空白字符时,提示文本又会自动显示。这种...

    用Html+Js实现的“自动补全”功能.docx

    本篇将详细介绍如何使用HTML和JavaScript实现这一功能。 ### HTML 结构分析 自动补全的基本结构通常包含一个输入框和一个用于显示匹配结果的列表。在示例中,选择了一个`&lt;div&gt;`包裹输入框和列表,并使用`&lt;input&gt;`...

    一个 输入框 提示 插件

    在IT行业中,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发中不可或缺。本文将详细讨论“一个输入框提示插件”的相关知识点,包括JavaScript基础、输入框交互设计以及插件开发。 首先,JavaScript...

    jquery实现友好的输入框提示

    在网页设计中,提供友好的用户输入提示是提高用户体验的...jQuery库通过简化JavaScript的DOM操作,事件处理,动画效果以及Ajax交互,使得开发更高效。在HTML文档中,我们可以通过添加以下代码引入jQuery库: ```html ...

    CSS3 input输入框蓝光特效.zip

    通过监听DOM事件,如`focus`和`blur`,可以控制何时触发和移除这个特效。jQuery库简化了DOM操作和事件处理,使得代码更加简洁。例如,当用户点击输入框时,可以使用`.addClass()`方法添加一个包含蓝光效果的CSS类,...

    js jquery 自动在文本框提示信息

    对于“自动在文本框提示信息”,我们通常指的是当用户聚焦到文本输入框时,显示一段预设的提示文本,而当用户开始输入时,这个提示文本会自动消失或者改变。 实现这一功能,首先需要在HTML中设置一个文本输入框,并...

    jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    之后,还为每个input绑定focus和blur事件,在输入框获得焦点时隐藏提示信息,在失去焦点且输入框为空时再次显示提示信息。 6. jQuery版本兼容性: 示例中提到使用的jQuery版本为1.7.2,不同的jQuery版本在某些API...

    jquery实现当输入框获得焦点时自动渐变颜色

    标题 "jquery实现当输入框获得焦点时自动渐变颜色" 涉及的是在Web开发中使用jQuery库来实现一种动态用户体验,即当用户点击或选中一个输入框(text box)时,该输入框的边框颜色会逐渐变化,以增加交互性和视觉吸引...

    jquery仿支付宝input文本输入框放大组件.zip

    该组件基于JavaScript库jQuery构建,jQuery是Web开发中广泛使用的库,提供了丰富的DOM操作、事件处理和动画效果等功能,极大地简化了JavaScript的使用。在这个组件中,jQuery被用来监听input元素的聚焦和失焦事件,...

Global site tag (gtag.js) - Google Analytics