JS 기본 지식 중 onblur 및 onfocus 이벤트 적용 소개

HTML 페이지에서 버튼 및 텍스트 상자와 같은 시각적 요소에는 포커스를 갖거나 잃기 위한 이벤트가 있습니다. 이러한 이벤트는 마우스 또는 키보드 동작에 대한 응답으로 사전 설정된 작업을 트리거할 수 있습니다. 이 기사에서는 포커스를 얻고 잃는 텍스트 상자를 예로 들어 온포커스와 온블러의 적용을 간략하게 설명합니다.

1. onfocus(get focus 이벤트)
텍스트 상자에 포커스가 생기면 그 안에 있는 텍스트는 "Hao123" 웹사이트의 Baidu 검색 입력 상자와 같습니다. 선택한 경우에는 온포커스를 사용하여 이러한 작업을 수행할 수 있습니다.
마우스 포인터를 다음 텍스트 상자 위로 이동하면 안에 있는 모든 텍스트가 선택됩니다.
URL을 입력하세요
어떻게 하나요? 다음 코드와 설명을 살펴보세요.

코드에서 onmousemove(마우스 포인터 전달) 이벤트에 대한 JS 문이 입력 태그에 포함되어 있습니다. 등호 뒤의 this.focus()는 초점은 입력 커서가 텍스트 상자에 표시된다는 것입니다. 그러나 그 안의 모든 텍스트를 선택하려면 텍스트 상자의 모든 텍스트를 선택하라는 의미인 this.select() 문을 사용해야 합니다. .

2. onblur(포커스 상실 이벤트)
실제로는 사용자가 제출 버튼을 클릭한 후에 텍스트 상자가 올바르게 입력되었는지 감지하는 경우가 많습니다. , 컨트롤이 포커스를 잃으면 이 감지 작업을 실시간으로 수행할 수 있습니다. 이 경우 onblur 이벤트가 유용합니다.
다음 예에는 4개의 텍스트 상자가 있습니다. 그 중 하나를 클릭하지 않으면 아무 일도 일어나지 않습니다. 그러나 그 중 하나를 클릭하면 입력하면 포커스가 생깁니다(입력 커서가 내부에 있음). 아무 것도 클릭하지 않고 다른 곳을 클릭하면 초점이 흐려집니다. 경고 메시지가 뜹니다.
이름
성별
나이
주소

다음은 코드와 설명입니다. :
양식 코드

코드 복사 코드는 다음과 같습니다.

이름
성별


주소

JS 코드

코드 복사 코드는 다음과 같습니다.

function chkvalue(txt) {
if (txt.value=="") Alert("텍스트 상자를 채워야 합니다!")
}

양식 코드에서 각 상자 코드에는 onblur JS 문이 포함되어 있으며 모두 후속 JS 코드에서 사용자 정의 함수 chkvalue(this)를 호출합니다. 이는 텍스트 상자가 포커스를 잃을 때 chkvalue()가 호출됨을 의미합니다. 텍스트 상자가 비어 있는지 여부, 비어 있으면 경고 창이 나타납니다. 이 함수에는 함수 자체를 호출하기 위해 이전 텍스트 상자에서 사용된 매개변수(this)에 해당하는 하나의 매개변수(txt)가 있습니다.