Jquery使用Id获取焦点和失去焦点

    Jquery使用Id获取焦点和失去焦点有2种方法

先用第一种(val()=="空"):

  

 <div>
        <input type="text" id="address"  value="请输入邮箱地址" />
        <input type="text" id="password" value="请输入邮箱密码" />
        <input type="button"  value="登录" />
 </div>

<script type="text/javascript">
 $("#address").focus(function () {  //focus获取鼠标焦点时,如果输入框的值为 "请输入邮箱地址" ,则将输入框中的值清空
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "请输入邮箱地址")
            {
                $(this).val("");
            }
        });
        $("#address").blur(function () {  //blur失去鼠标焦点时,如果输入框的值为空,则将输入框中的值为   "请输入邮箱地址"
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "") {
                $(this).val("请输入邮箱地址");
            }
        });

        $("#password").focus(function () {  //focus获取鼠标焦点时,如果输入框的值为 "请输入邮箱密码" ,则将输入框中的值清空
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "请输入邮箱密码") {
                $(this).val("");
            }
        });
        $("#password").blur(function () {  //blur失去鼠标焦点时,如果输入框的值为空,则将输入框中的值为   "请输入邮箱密码"
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "") {
                $(this).val("请输入邮箱密码");
            }
        });
</script>

这是第二种(defaultValue):

 <div>
        <input type="text" id="address"  value="请输入邮箱地址" />
        <input type="text" id="password" value="请输入邮箱密码" />
        <input type="button"  value="登录" />
 </div>

<script type="text/javascript">
  //还可以使用表单元素的defaultValue属性来实现同样的功能
        $("#address").focus(function () {
            var txt_value = $(this).val();
            if (txt_value == this.defaultValue) {  //this指向当前的文本框,this.defaultValue 就是当前文本框的默认值
                $(this).val("");
            }
        });
        $("#address").blur(function () {
            var txt_value = $(this).val();
            if (txt_value =="") {
                $(this).val(this.defaultValue);
            }
        });

        $("#password").focus(function () {
            var txt_value = $(this).val();
            if (txt_value == this.defaultValue) {
                $(this).val("");
            }
        });
        $("#password").blur(function () {
            var txt_value = $(this).val();
            if (txt_value == "") {
                $(this).val(this.defaultValue);
            }
        });
</script>

原文地址:https://www.cnblogs.com/chaonuanxi/p/10226047.html

时间: 2024-10-13 02:15:11

Jquery使用Id获取焦点和失去焦点的相关文章

JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, JavaScript Code复制内容到剪贴板 //这样执行,jquery只会当获取焦点后执行焦点函数的语句了. $(”#nameInput”).focus(); 可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象,这样的话$(”#nameInp

网站开发div在Jquery中的鼠标事件失去焦点

网站div在Jquery中的鼠标事件失去焦点,今天在做网站开发的时候遇到了个问题,就是我在用Jquery做导航的时候,用到了Jquery的鼠标事件mouseout,但问题出来了,我有两个div,A的div包含了B的div,本来我是想当鼠标移出A的div的时候隐藏div,可是当我的鼠标移到B的div在移出的时候也会触发jquery的隐藏事件,这让人很头痛. 在网上搜了下,找到了解决的法子,就是直接把mouseout换成了mouseleave就可以了,具体的问题请大家参考Jquery的开发文档吧

jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

输入框的获取焦点、失去焦点

善用obj的defaultValue属性 //输入框的获取焦点.失去焦点 function TextOnFocus(obj) {     if (obj.value == obj.defaultValue)     {         obj.value = "";     }     obj.style.color="black"; } function TextOnBlur(obj) {     if (obj.value == "")   

基于jQuery的网站首页宽屏焦点图幻灯片

今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <!-- index-focus begin --> <div class="sliderWrap"> <section class="banner-TAL"> <div class

jQuery的$(‘#id’)与document.getElementByID(&#39;id&#39;)的区别

用jQuery选择的包装集返回的是jQuery对象,用document.getElementByID返回的是DOM对象. jQuery对象 --> DOM对象 /* Convert a jQuery object to a DOM object.*/var jquery = $('#id');alert(jquery.html()); var dom = jquery[0];// or var dom = jquery.get(0);alert(dom.innerHTML); DOM对象 -->

jquery获取焦点和失去焦点事件代码

input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 . 相关js代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="te

jquery注册文本框获取焦点清空,失去焦点赋值

在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script> &

jquery中获取焦点和失去焦点事件

<script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 获取焦点事件,不传参 focus $('.one').focus(); // 监听焦点事件,能返回 $('.one').focus(function(){ console.log("获取到焦点!") }) // 失去焦点事件 blur 能返回 $('.one').blur(fun