HTML의 onfocus 및 onblur 속성은 무엇입니까? 사용하는 방법?

html의 onfocus 및 onblur 속성은 무엇인가요? 사용하는 방법? 이번 글에서는 onfocus 속성과 onblur 속성이 무엇인지 소개하고, onfocus 속성과 onblur 속성의 간단한 사용법을 알려드리겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선 onfocus와 onblur가 html의 이벤트 속성이라는 것을 알아야 합니다. 다음으로 이 두 속성에 대해 간략하게 소개하겠습니다.

1, onfocus 이벤트 속성

onfocus 속성은 요소가 포커스를 얻을 때 트리거됩니다. 즉, 일반적으로 , 및 태그.

참고: onfocus 속성은 다음 요소에 사용하기에 적합하지 않습니다: , ,
, , , , , , <script>, <style> 또는 <title>. </script>

2.onblur 이벤트 속성

onblur 속성은 요소가 포커스를 잃을 때 트리거됩니다. 즉, 포커스 손실 이벤트가 자주 사용됩니다. 확인 코드(예: 사용자가 양식 필드를 떠나는 경우)

설명:

1 onfocus 속성은 onblur 속성과 반대입니다.

2. 모든 주요 브라우저는 onfocus 속성과 onblur 속성을 지원합니다.

아래에서는 간단한 코드 예제를 통해 onfocus 속성과 onblur 속성의 사용법을 소개합니다.

html onfocus 이벤트 속성 사용

코드 예: 입력 필드에 포커스가 있을 때 트리거 기능. 이 함수는 입력 필드의 배경색(노란색)을 변경합니다. #html onblur 이벤트 속성 사용

Code 예: 사용자가 입력 필드를 떠날 때 입력 필드 유효성 검사: 소문자를 대문자로 변환

<script>
function setStyle(x){
   document.getElementById(x).style.background="yellow";
}
</script>

<div>
   <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
   用户名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
   密   码: <input type="password" id="lname" onfocus="setStyle(this.id)">
</div>

Rendering: # 🎜🎜#

Summary: 위는 본 문서에서 소개한 html onfocus 및 onblur 이벤트 속성의 전체 내용입니다. 기사를 직접 작성하여 이해를 심화할 수 있으므로 모든 사람의 연구에 도움이 되기를 바랍니다.

위 내용은 HTML의 onfocus 및 onblur 속성은 무엇입니까? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!