jQuery Blur() 이벤트 사용 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery Blur() 이벤트 사용 방법에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-26 14:04:53

원래의

3138명이 탐색했습니다.

개요

일치하는 각 요소에 대해 흐림이벤트를 트리거합니다.

이 함수는 브라우저의 기본 동작을 포함하여 흐림 이벤트에 바인딩된 모든 함수를 호출하고 실행합니다. false를 반환하면 브라우저의 기본 동작이 실행되는 것을 방지할 수 있습니다. 요소가 포커스를 잃으면 흐림 이벤트가 트리거됩니다. 이는 마우스 동작 또는 일치하는 각 요소의 흐림 이벤트에 핸들러 함수를 바인딩하는

parameter

fnFunctionV1.0

일 수 있습니다.

[data],fnString,FunctionV1.4.3

data:blur([Data], fn)는 함수 fn이 처리할 데이터를 전달할 수 있습니다.

fn: 일치하는 각 요소의 흐림 이벤트에 바인딩된 핸들러 함수입니다.

Example

Description:

모든 문단의 흐림 이벤트를 트리거합니다.

jQuery Code:

$("p").blur();

로그인 후 복사

Description:

한 문단이 초점을 잃으면 "Hello World!"가 팝업되고 흐림 이벤트에 연결됩니다. 일치하는 각 요소의 특정 처리 기능.

jQuery 코드:

$("p").blur( function () { alert("Hello World!"); } );

로그인 후 복사

Example

포커스를 잃을 때 입력 필드의 색상 변경(흐림):

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

로그인 후 복사

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>

로그인 후 복사

정의 및 사용법 흐림 이벤트는 요소가 초점을 잃을 때 발생합니다. Blur() 함수는 흐림 이벤트를 트리거하거나, 함수 매개변수가 설정된 경우 흐림 이벤트가 발생할 때 실행될 코드를 함수에서 지정할 수도 있습니다. 팁: 이전에는 흐림 이벤트가 양식 요소에서만 발생했습니다. 새 브라우저에서는 이 이벤트를 모든 요소에서 사용할 수 있습니다

触发 blur 事件触发被选元素的 blur 事件。语法$(selector).blur()<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
  $("#btn1").click(function(){
    $("input").focus();
  });  
  $("#btn2").click(function(){
    $("input").blur();
  }); 
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
</html>

로그인 후 복사

위 내용은 jQuery Blur() 이벤트 사용 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!