Js의 onblur 및 onfocus 이벤트(그래픽 튜토리얼)

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

1. onfocus (포커스 가져오기 이벤트)

텍스트 상자에 포커스가 오면 "Hao123" 웹사이트의 Baidu 검색 입력 상자와 같이 텍스트 상자 안의 텍스트가 모두 자동으로 선택됩니다. 이러한 작업은 onfocus를 사용하여 수행할 수 있습니다. 성취하다.

다음 텍스트 상자에서 마우스 포인터를 위로 이동하면 안에 있는 모든 텍스트가 선택됩니다.

URL을 입력하세요

어떻게 하나요? 다음 코드와 설명을 보세요.

<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">

코드에서 onmousemove(마우스 포인터 전달) 이벤트의 JS 문이 입력 태그에 포함되어 있습니다. 등호 뒤의 this.focus()는 포커스를 얻었음을 의미합니다. ; 초점을 맞추는 신호는 다음과 같습니다. 입력 커서가 텍스트 상자에 나타나지만 그 안의 모든 텍스트를 선택하려면 this.select() 문을 사용해야 합니다. 이는 텍스트 상자의 모든 텍스트를 선택한다는 의미입니다.

2. onblur(포커스 손실 이벤트)

우리는 일반적으로 사용자가 제출 버튼을 클릭한 후에 텍스트 상자가 올바르게 입력되었는지 감지합니다. 실제로 컨트롤이 포커스를 잃으면 이를 감지할 수 있습니다. 실시간으로 이 감지 작업을 수행하려면 이 경우 onblur 이벤트가 유용합니다.

다음 예에는 4개의 텍스트 상자가 있습니다. 그 중 하나를 클릭하지 않으면 아무 일도 일어나지 않습니다. 그러나 그 중 하나를 클릭하면 아무것도 입력되지 않으면 포커스가 생깁니다(입력 커서는 내부에 있음). 포커스를 잃게 만들기 위해 다른 곳을 클릭하면 경고가 표시됩니다. 시도해 보세요.

Name

Gender

Age

Address

다음은 코드와 설명입니다.

양식 코드

<form name="blur_test">
   <p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
    性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
    年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
    住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>

JS 코드

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("文本框里必须填写内容!");
}
</script>

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript가 빠른 정렬을 구현하는 방법에 대한 코드 자세한 설명

JavaScript가 캡슐화된 방식으로 버블 정렬을 구현하는 방법

JavaScript 작동 메커니즘 및 개념 분석에 대한 자세한 설명

위 내용은 Js의 onblur 및 onfocus 이벤트(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!